jquery如何禁止上下滾動事件

這篇文章主要介紹jquery如何禁止上下滾動事件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

jquery禁止上下滾動事件的方法：1、打開相應的代碼文件；2、判斷滾動條高度；3、通過“$(document).bind('mousewheel', function(event, delta)...”禁用滾輪事件即可。

本文操作環境：windows7系統、jquery3.2.1版、DELL G3電腦

jQuery禁用、開啟鼠標滾輪事件

寫一個網頁的時候需要剛打開的時候是一個占滿一屏的視頻，想要禁用鼠標滾輪事件，通過點擊向下的按鈕使頁面向下滑動過視頻部分，所以查找了禁用鼠標滾輪的事件方法

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、然后判斷滾動條高度是否小于頁面一屏的高度，這里加了一個獲取一屏高度的函數

// 獲取瀏覽器窗口的可視區域的高度
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;
};

但是這樣就會無限的給document禁用或開啟鼠標滾輪事件，so sad

3、獲取事件已經綁定的事件

使用

$._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如何禁止上下滾動事件”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！