Edited at

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

More than 5 years have 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;