JavaScriptマウスホイールを下にスクロールするか、上にスクロールするかを判断

私たちがよく使うのはマウスで、マウスの中ボタンは一般的にページをスライドするのに使われていますが、ページの中には素晴らしい効果が多く、マウスのホイールを使って操作したほうがいいです.
もちろん携帯にはこの装置はないので、携帯端末の実現方法を考慮する必要はありません.携帯端末にはタッチスライドイベントがあります.
JavaScriptを使用してマウスホイールが下にスクロールするか、上にスクロールするかを判断すると、テキストボックスを変更する数字を上下にスライドするなど、ホイールの操作をより正確に制御するのに役立ち、上には増加し、下には減少し、実用的な機能です.
 
まず、ブラウザによってローラーイベントが異なるため、言わざるを得ません.主に2種類あります.
onmousewheel(firefoxはサポートされていません)とDOMMouseScroll(firefoxのみサポートされています)
この2つのイベントについては詳しくは説明しませんが、知りたい方はマウスホイール(mousewheel)とDOMMouseScrollイベントに移動してください.そのため、この過程でイベントリスニングを追加する必要があります.
コードは以下の通りです.互換性firefoxはaddEventListenerで傍受されます.

/*    */ 

if(document.addEventListener){ 

    document.addEventListener('DOMMouseScroll',scrollFunc,false); 

}//W3C 

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

また、ローラーが上下にスクロールすると判断してブラウザでも互換性を考慮し、現在5大ブラウザ(IE、Opera、Safari、Firefox、Chrome)でFirefoxはdetailを使用し、残りの4種類はwheelDeltaを使用している.
両者は取値のみで一致せず,意味は一致し,detailは±3,wheelDeltaは±120,正数は上向き,負数は下向きを表す.
具体的なサンプルコードは次のとおりです.

<label for="wheelDelta">   :</label>(IE/Opera)<input type="text" id="wheelDelta"/> 

<label for="detail">   :(Firefox)</label><input type="text" id="detail"/> 

<script type="text/javascript"> 

var scrollFunc=function(e){ 

    ee=e || window.event; 

    var t1=document.getElementById("wheelDelta"); 

    var t2=document.getElementById("detail"); 

    if(e.wheelDelta){//IE/Opera/Chrome 

        t1.value=e.wheelDelta; 

    }else if(e.detail){//Firefox 

        t2.value=e.detail; 

    } 

} 

/*    */ 

if(document.addEventListener){ 

    document.addEventListener('DOMMouseScroll',scrollFunc,false); 

}//W3C 

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

</script>

上記のコードを実行すると、次の結果が得られます.

非firefoxブラウザでは、ローラが上にスクロールする戻り値は120であり、下にスクロールする戻り値は-120

である.

でfirefoxブラウザでは、ローラが上にスクロールする戻り値は-3、下にスクロールする戻り値は3

である.
コード部分は以下の通りで、e.wheelDeltaは非firefoxブラウザかどうかを判断し、e.detailはfirefoxブラウザである

if(e.wheelDelta){//IE/Opera/Chrome 

    t1.value=e.wheelDelta; 

}else if(e.detail){//Firefox 

    t2.value=e.detail; 

}