Antun’s Blog

Using a scrollbar in LZX is so deceptively simple, that developers often have a hard time figuring it out. Below is an example of a scrollbar in action:

There are two LZX classes you can use to make a view scroll its contents: scrollbar and hscrollbar. scrollbar is vertical; hscrollbar is horizontal. The two orientations will work together automatically. The scrollbar is designed to scroll a single view within a clipping container. i.e. if you want to scroll multiple views (which you almost always will), you should wrap them in a single containing view.The diagram below shows the layout of views:

Some guidelines:

• The clipping view should have a defined width and height. It’s OK if they are constraints.
• The clipping view must clip its contents. (clip=”true”).
• The scrolling view must not have a defined height. Exploit the stretchy behavior of views here.
• Define a width for the scrolling view, so that it leaves room for the scrollbar.
• The scrollbar and scrolling view must be siblings. If not, you’ll have to set the target attribute.

Download an example of using the scrollbar