如何监听Canvas上滚动条的出现或隐藏

当Canvas中的内容比较满时，超出Canvas显示边界的内容会引起Vertical Scrollbar或者Horizontal Scrollbar的显示。

 

Scrollbar会占据一些面积，从而可能会影响软件UI的布局。我们也许会根据Scrollbar的显示而对界面进行相应的调整。

当我们浏览完Canvas的自带Event后，不难发现，关于滚动的只有一个Scroll事件。当用户拖动滚动条时，这个事件才会被激发。非我们所需。

解决思路如下，

1. Scrollbar的出现是因为页面面积的变化。会激发Canvas的updateComplete事件的激发；

2. 并不是所有的updateComplete的事件的激发都会伴有Scrollbar的出现。那么我们可以在updateComplete的监听方程中来判断下Canvas的scrollbar的property是否为空；

3. 在updateComplete的监听方程中，需要为2中的判断加一个flag，以标明是否scrollbar是由从无到有的出现。

实现的大概代码如下，

 

private function onInit():void{
  //config the UPDATE_COMPLETE event listener function
  this.addEventListener(FlexEvent.UPDATE_COMPLETE, traceScrollBar);
}

/**
 * "isShowUp" is the flag for checking whether the scrollbar is added from null status
 * "can" is the scrollbar's container
 * @param event canvas' UPDATE_COMPLETE event
 */
private function traceScrollBar(event:FlexEvent):void{
  if(can.verticalScrollBar != null && !isShowUp){
    trace("The vertical scrollbar is added");
    isShowUp = true;
    return;
  }
  if(can.verticalScrollBar == null && isShowUp){
    isShowUp = false;
    return;
  }
}