3.9.在容器內(nèi)控制滾動和溢出

2024-04-27 13:51:49

字體：大中小

供稿：網(wǎng)友

3.9.1 問題
你需要禁用容器的垂直滾動條并且在某個組件上創(chuàng)建一個用戶可以通過鼠標(biāo)滑過來控制滾動的區(qū)域。
3.9.2 解決辦法
使用horizontalScrollPolicy、verticalScrollPolicy 和verticalScrollPosition 屬性。
3.9.3 討論
我們可以通過horizontalScrollPolicy 和verticalScrollPolicy 屬性控制滾動條。如果要使其中一個或全部滾動條始終顯示，則將其中一個或全部設(shè)置成”on”，反之亦然。

而”auto”值則導(dǎo)致滾動條僅在容器的實際測量尺寸大于width 或height 指定的值時出現(xiàn)。例如，將horizontalScrollPolicy 設(shè)置為”auto”則意味著當(dāng)容器的寬度超過width屬性的值時出現(xiàn)滾動條。

要滾動一個組件，使用horizontalScrollPosition 和verticalScrollPosition 屬性。通過這兩個屬性，我們可以設(shè)定組件內(nèi)容的可視部分往右下角滾動多遠(yuǎn)的距離。例如：

-XML

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
height="200" horizontalScrollPolicy="auto"
verticalScrollPolicy="off" mouseMove="autoScroll(event)">
<mx:Script>
<![CDATA[
private var hasAddedScroll:Boolean = false;
private function autoScroll(event:MouseEvent):void
{
if(mouseX > width - 50 && !hasAddedScroll)
{
addEventListener(Event.ENTER_FRAME, scrollRight);
hasAddedScroll = true;
}e
else if(mouseX < 50 && !hasAddedScroll)
{
addEventListener(Event.ENTER_FRAME, scrollLeft);
hasAddedScroll = true;
}e
else
{
removeEventListener(Event.ENTER_FRAME,
scrollRight);
removeEventListener(Event.ENTER_FRAME,
scrollLeft);
hasAddedScroll = false;
}
}
private function scrollRight(event:Event):void
{
if(horizontalScrollPosition <
maxHorizontalScrollPosition)
{
horizontalScrollPosition+=4;
}e
else
{
removeEventListener(Event.ENTER_FRAME,
scrollRight);
hasAddedScroll = false;
}
}
private function scrollLeft(event:Event):void
{
if(horizontalScrollPosition > 0)
{
horizontalScrollPosition-=4;
}e
else
{
removeEventListener(Event.ENTER_FRAME,
scrollLeft);
hasAddedScroll = false;
}
}

]]>
</mx:Script>
<mx:Image source="@Embed('assets/image.png')"/>
<mx:Image source="@Embed('assets/image.png')"/>
<mx:Image source="@Embed('assets/image.png')"/>
<mx:Image source="@Embed('assets/image.png')"/>
<mx:Image source="@Embed('assets/image.png')"/>
</mx:HBox>