スクロールバー

<view ・・・ clip="true"> ← 親ビューにclip="true"
  <view>・・・</view>     ← スクロール対象ビュー
  <scrollbar/>            ← スクロールバー
</view>

• <scrollbar/>の親ビューにとっての最初のビューに対してスクロールができるようになります。
• 縦スクロールバーは親ビューの右端に配置、横スクロールバーは親ビューの底に配置されます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <view x="10" y="10" width="80" height="85" bgcolor="0xffffff" 
      clip="true">
    <vbox>
      <text text="0001"/>
      <text text="0002"/>
      <text text="0003"/>
      <text text="0004"/>
      <text text="0005"/>
      <text text="0006"/>
      <text text="0007"/>
      <text text="0008"/>
      <text text="0009"/>
      <text text="0010"/>
      <text text="0011"/>
      <text text="0012"/>
      <text text="0013"/>
      <text text="0014"/>
      <text text="0015"/>
    </vbox>
    <scrollbar/>
  </view>
</canvas>

  <scrollbar visible="${this.scrollable}"/>

ウィンドウサイズを大きくしてスクロールが不要になるとスクロールバーが消えます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <window width="100" height="100" resizable="true" clip="true">
    <vbox>
      <text text="0001"/>
      <text text="0002"/>
      <text text="0003"/>
      <text text="0004"/>
      <text text="0005"/>
      <text text="0006"/>
      <text text="0007"/>
      <text text="0008"/>
      <text text="0009"/>
    </vbox>
    <scrollbar visible="${this.scrollable}"/>
  </window>
</canvas>

マウスホイールでスクロールする例。対象が複数あった場合は、マウスオーバーの有無でスクロール対象を区別します。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout axis="x" spacing="20"/>
  <view y="10" width="80" height="85" bgcolor="0xffffff" 
      clip="true">
    <attribute name="isMouseover" value="false"/>
    <handler name="onmouseover">
      this.setAttribute('isMouseover',true);
    </handler>
    <handler name="onmouseout">
      this.setAttribute('isMouseover',false);
    </handler>
    <vbox>
      <text text="0001"/>
      <text text="0002"/>
      <text text="0003"/>
      <text text="0004"/>
      <text text="0005"/>
      <text text="0006"/>
      <text text="0007"/>
      <text text="0008"/>
      <text text="0009"/>
      <text text="0010"/>
      <text text="0011"/>
      <text text="0012"/>
      <text text="0013"/>
      <text text="0014"/>
      <text text="0015"/>
    </vbox>
    <scrollbar>
      <handler name="onmousewheeldelta" reference="lz.Keys" args="d">
        if (parent.isMouseover) {
          this.step(-d);
        }
      </handler>
    </scrollbar>
  </view>
  <view y="10" width="80" height="85" bgcolor="0xffffff" 
      clip="true">
    <attribute name="isMouseover" value="false"/>
    <handler name="onmouseover">
      this.setAttribute('isMouseover',true);
    </handler>
    <handler name="onmouseout">
      this.setAttribute('isMouseover',false);
    </handler>
    <vbox>
      <text text="0001"/>
      <text text="0002"/>
      <text text="0003"/>
      <text text="0004"/>
      <text text="0005"/>
      <text text="0006"/>
      <text text="0007"/>
      <text text="0008"/>
      <text text="0009"/>
      <text text="0010"/>
      <text text="0011"/>
      <text text="0012"/>
      <text text="0013"/>
      <text text="0014"/>
      <text text="0015"/>
    </vbox>
    <scrollbar>
      <handler name="onmousewheeldelta" reference="lz.Keys" args="d">
        if (parent.isMouseover) {
          this.step(-d);
        }
      </handler>
    </scrollbar>
  </view>
</canvas>

(OpenLaszlo4.6.1/swf10)

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <view width="50" height="100" bgcolor="white" clip="true">
    <text multiline="true">
      1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
      a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>
    </text>
    <scrollbar id="sb" visible="${this.scrollable}" >
      <handler name="onmousewheeldelta" reference="lz.Keys" args="d">
        this.step(-d);
      </handler>
      <handler name="oninit" reference="canvas">
        this.step(100);
      </handler>
    </scrollbar>
  </view>
</canvas>