jqueryで上下スクロールイベントを無効にする方法-jsチュートリアル-php.cn

jquery で上下のスクロールイベントを無効にする方法: 1. 対応するコードファイルを開きます; 2. スクロールバーの高さを決定します; 3. "$(document).bind('mousewheel', function(event, delta) ..." スクロールホイールイベントを無効にするだけです。

jqueryで上下スクロールイベントを無効にする方法

##この記事の動作環境: Windows7 システム、jquery3.2.1 バージョン、DELL G3 コンピューター

jQuery はどのように上下スクロールイベントを無効にしますか?

jQuery はマウスホイールイベントを無効または有効にします

Web ページを作成するとき、最初に開いたときに画面全体を埋めるビデオである必要があります。マウスホイールイベントを無効にしたい場合は、下ボタンをクリックしてビデオ部分をページを下にスライドさせます。これにより、マウスを無効にするイベントメソッドが見つかりましたWheel

1. マウスホイールイベントを無効にする

$(document).bind('mousewheel', function(event, delta) {return false;});

ログイン後にコピー

ビデオをスライドした後、マウスホイールを使用して下にスライドする必要があるため、マウスホイールが使用できるようにイベントのバインドを解除します

2. マウスホイールイベントを有効にしたい場合は、イベントのバインドを直接解除してください

$(document).unbind('mousewheel');

ログイン後にコピー

ただし、マウスホイールを使用できるようになった後、上にスクロールするとビデオ部分に戻ります。 , 動画部分でマウスホイールや下ボタンが使えることを知ると非常に恥ずかしいので、動画部分にスライドするときは無効にしておく必要があります。動画部分

#1. まず、上にスライドしていると判断してください

ps: jQuery は中途半端なので、コード内に js コードと jquery が含まれていますコード

window.onscroll = function(){ p=$(this).scrollTop(); if(t>p){ console.log("向上滚动"); } t = p; };

ログイン後にコピー

2. 次に、スクロールバーの高さがページの 1 画面の高さより小さいかどうかを確認します。ここでは 1 画面の高さを取得する関数

// 获取浏览器窗口的可视区域的高度 function getViewPortHeight() { return document.documentElement.clientHeight || document.body.clientHeight; } window.onscroll = function(){ p=$(this).scrollTop(); let height = getViewPortHeight(); if (p >= height){ $(document).unbind('mousewheel'); } if(t>p){ if (p < height) { $(document).bind('mousewheel', function(event, delta) { return false; }); $('html,body').animate({scrollTop:0},1000); } } } t = p; };

ログイン後にコピー

を使用しますが、これは無限に無効化または無効化します。悲しいのでマウスホイールイベントをオンにします

3. イベントがバインドされたことを示すイベントを取得します

Use

$._data(obj[0],"event") var objEvt = $._data($(document)[0], 'events'); window.onscroll = function(){ p=$(this).scrollTop(); let height = getViewPortHeight(); if (p >= height){ $(document).unbind('mousewheel'); objEvt = $._data($(document)[0], 'events'); } if(t>p){ if (p < height) { if (!objEvt){ $(document).bind('mousewheel', function(event, delta) { return false; }); objEvt = $._data($(document)[0], 'events'); $('html,body').animate({scrollTop:0},1000); } } } t = p; };

ログイン後にコピー

要素がすでにバインドされている場合、イベントがバインドされない場合、要素はバインドされません。イベントのバインド後に要素のバインドを解除します。

推奨される学習: 「

jquery ビデオチュートリアル

」

以上がjqueryで上下スクロールイベントを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。