JavaScript
Flex
as3
MXML
ActionScript3

FlexでListを使った時のマウスホイールの挙動制御

More than 1 year has passed since last update.

FlexでListを使った時にページ自体にスクロールがあるとListの中だけスクロールして欲しいのに
ページ自体もスクロールして非常に使いづらかったりする。

そこでExternalInterfaceを使ってswfがアクティブ・非アクティブになったタイミングで
ページ側のマウスホイールの制御をすることでList内だけでスクロールすることができる。

Main.mxml
<s:application active="activeHandler(event)" deactive="deactiveHandler(event)">
    <fx:Script>
            /**
             * swfがアクティブになった
             * @param event
             */
            protected function activateHandler( event:Event ):void {
                ExternalInterface.call( "wheelEnabled", false);
            }

            /**
             * swfが非アクティブになった
             * @param event
             */
            protected function deactivateHandler( event:Event ):void {
                ExternalInterface.call( "wheelEnabled", true );
            }
    </fx:Script>
</s:application>
//ブラウザのホイールの状態(初期値有効)
var _wheelEnabled = true;

//Flashから呼ばれる関数
function wheelEnabled(flg){
    _wheelEnabled = flg;
}

//ホイールイベントの処理
function wheel(event){
    if(!_wheelEnabled){
        if(!event){
            event = window.event;
        }
        if(event.preventDefault){
            event.preventDefault();
        }
        event.returnValue = false;
    }
}

//イベントリスナーの登録
if(window.addEventListener){
    window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;