jquery怎麼禁止上下滾動事件

jquery禁止上下滾動事件的方法：1、開啟對應的程式碼檔案；2、判斷捲軸高度；3、透過「$(document).bind('mousewheel', function(event, delta) ...」停用滾輪事件即可。

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

#jquery怎麼禁止上下滾動事件?

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影片教學》

以上是jquery怎麼禁止上下滾動事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！