文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jquery如何禁止上下滚动事件

2024-04-02 19:55

关注

这篇文章主要介绍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如何禁止上下滚动事件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯