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

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

##この記事の動作環境: 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 サイトの他の関連記事を参照してください。