PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のオンラインパソコン教室

岐阜のパソコン教室「パソコンスクール・テルン」

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>
これで上にスクロールしたとき、下にスクロールしたときで処理を分け、
いろいろなことが出来るようになります。

関連サイト

パソコン教室

パソコンスクール・テルン岐阜・穂積・大垣教室 楽しく学ぶ・通うパソコン教室あもる

パソコン修理・販売・買取・サポート

パソコンの修理・販売・買取・サポート