首頁 > web前端 > js教程 > 主體

jquery怎麼禁止上下滾動事件

藏色散人
發布: 2021-11-11 11:17:29
原創
4447 人瀏覽過

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

jquery怎麼禁止上下滾動事件

本文操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!