JQueryでマウスホイールの上下判別をする方法
2021年5月28日jQueryを使ってのマウスホイール処理方法は
以下のようなスクリプト記述で取得可能となります。
以下のようなスクリプト記述で取得可能となります。
<script type=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></script>
<script>
$(
function
(){
var
mousewheelevent =
'onwheel'
in
document ?
'wheel'
:
'onmousewheel'
in
document ?
'mousewheel'
:
'DOMMouseScroll'
;
$(document).on(mousewheelevent,
function
(e){
e.preventDefault();
var
delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if
(delta < 0){
// マウスホイールを下にスクロールしたときの処理を記載
}
else
{
// マウスホイールを上にスクロールしたときの処理を記載
}
});
});
</script>
これで上にスクロールしたとき、下にスクロールしたときで処理を分け、
いろいろなことが出来るようになります。