<scrollbar>

By default, the <scrollbar> tag creates a vertical scrollbar. Setting axis="x" produces a horizontal scrollbar. If you do not specify a scrolltarget, the scrollbars will also control their own layout: the vertical scrollbar will be aligned the the right of the parent view and horizontal scrollbar will be aligned to the bottom.

Typically one or two scrollbars and a single view that is the contents to be scrolled, the scrolltarget, are contained within a parent view with clip=true. The scrolling effect is produced by moving the scrolltarget while its visible region is clipped by the parent view.

Example 1. Simple scrollbar

<canvas height="100">
  <view name="main" width="100" height="80" clip="true">
    <view name="contents">
      <text multiline="true">
        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
      </text>
    </view>
    <scrollbar/>
  </view>
</canvas>

In the example above, the scrolltarget is the 'contents' view. A scrollbar moves its scrolltarget along its axis. The attribute that is controlled by the scrollbar may be specified as the scrollattr, overriding the default value of x or y.

• For details on how this component is constructed, see the Scrollbar section of the Component Design Guide.