3.9.在容器內控制滾動和溢出

2024-04-27 13:51:49

字體：大中小

來源：轉載

供稿：網友

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

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

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

-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>