这篇文章给大家分享的是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中文网

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中var、let、const关键字的使用有哪些不同

  在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过var关键字，函数声明是通过function关键字，而在ES6之后，声明的方式有var、let、const、function、class，本文主要讨论var、let和const之间的区别

• Vue基本指令有几种,基本用法是怎样的

  这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下

• JavaScript时间格式化怎么做，方法及代码是什么

  这篇文章主要介绍了JavaScript中时间格式化新思路toLocaleString()，研究Object对象的时候，看到了 toLocaleString() 这个方法可以很简单的实现时间格式化，下面来看看toLocaleString() 的详细内容吧,需要的朋友可以参考一下

• JS实现选项卡插件有什么办法？哪些问题要注意？

  我们平常在浏览一些网站的时候，经常能看到选项卡展示功能，其好处就是节约页面空间，我们只要点击不同的区域，就能展现不同的内容，这样能比较合理的展示内容。那么JS是怎样实现选项卡插件的呢？

• vue中实现页面跳转的操作方法是什么

  这篇文章主要给大家分享的是vue项目实现页面跳转的方法，vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下