JS禁用鼠标滚动

最新推荐文章于 2021-02-01 07:17:55 发布
最新推荐文章于 2021-02-01 07:17:55 发布
阅读量1.4k 收藏 3
点赞数 3
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49039848/article/details/108552457
版权

在网上找了一圈，愣是没找到不报错的禁用滚动。于是自己写了一个

以下的 document.querySelector("#big-box")为页面中最外层盒子
经测试绑定在body，html或者window上滚动会一直报这个错误
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See （由于目标被视为被动，无法在被动事件监听器中阻止缺省事件。）

<body>
<div id="big-box">...</div>
</body>

//取消默认事件
function stopDefault(e) {
  if (e.preventDefault) {
    e.preventDefault();
    e.stopPropagation();
  } else {
    window.event.returnValue = false;
    e.cancelBubble = true;
  }
  return false;
}
/* 以下的 document.querySelector("#big-box")为页面中最外层盒子
经测试绑定在body，html或者window上滚动会一直报这个错误
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>（由于目标被视为被动，无法在被动事件监听器中阻止缺省事件。）
*/
//开放滚动
function startwheel() {
  document.querySelector("#big-box").removeEventListener('DOMMouseScroll', function (e) {
    var e = e || window.event;
    stopDefault(e);
  }, false);
  document.querySelector("#big-box").onmousewheel = null;
}

//禁用滚动
function stopwheel() {
  var str = window.navigator.userAgent.toLowerCase();
  if (str.indexOf('firefox') !== -1) { //火狐浏览器
    document.querySelector("#big-box").addEventListener('DOMMouseScroll', function (e) {
      var e = e || window.event;
      //阻止窗口默认的滚动事件
      stopDefault(e);
    }, false);
  } else { //非火狐浏览器
    document.querySelector("#big-box").onmousewheel = function (ev) {
      var e = ev || window.event;
      stopDefault(e);
    };
  }
}
m0_49039848
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript实现禁止鼠标滚轮事件
10-23
主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下
js禁止鼠标滑轮_JS禁用和启用鼠标滚轮滚动事件
weixin_33851180的博客
12-30 2198
// left: 37, up: 38, right: 39, down: 40,// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36var keys = [37, 38, 39, 40];function preventDefault(e) {e = e || window.event;if (e.preventDefault)...
js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动
weixin_39634194的博客
12-20 1224
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码，供大家参考，具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。这里主要是当鼠标滑动到该div时，监听滚轮事件并通过preventDefault()事件来阻止滚动事件，以下是例子eg:#wrap {position:absolute;top:200px;background:#000000;font...
JS阻止鼠标滚动
weixin_33847182的博客
12-22 117
var scrollFunc=function(e){ e=e || window.event; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.retur...
（转） JS禁用鼠标滚轮事件
Dragon的博客
01-08 6290
function disabledMouseWheel() { if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel =
js 静止滚轮_javascript实现禁止鼠标滚轮事件
weixin_39719018的博客
12-19 429
平时我们兼容什么东西总是在调整低版本IE的兼容性，但是这回不是因为低版本浏览器不给力。而是因为火狐给力过头了，完全不顾其它浏览器的感受标新立异了。除了火狐之外，所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应。但是火狐却偏偏不支持MouseWheel，而使用无厘头的DOMMouseScroll，这玩意儿除了火狐以外其它浏览器都不兼容。也就是说，对于鼠标滚轮事件的处理，火狐只能使用...
JS禁用鼠标滚轮事件
热门推荐
jumtre的专栏
04-11 1万+
接到一个需求，要在flash里面使用鼠标滚轮控制壁纸地板的替换，这本身是一个小需求，但是在网页测试中发现滚动鼠标滚轮时，网页也会跟着滚动，这样鼠标就没法固定在滚动元件的上面，对用户体验造成了不良影响。 然后开始尝试阻止鼠标滚轮影响页面，先试用这段代码： function disabledMouseWheel() { if (document.addEventListen
js实现鼠标滑动到某个div禁止滚动
10-14
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js阻止移动端页面滚动的两种方法
10-20
本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧
react-scroll-context:滚动其子级时禁用文档主体上滚动的组件
05-10
滚动其子级时禁用在文档主体上滚动的组件。 安装 yarn add react - scroll - context 或者 npm install react - scroll - context -- save 道具 enable: boolean如果要手动禁用滚动，则将其设置为true。 例如： ...
js 禁用ctrl+滚轮
04-07
NULL 博文链接：https://cuizhilei.iteye.com/blog/1575191
touch-track-scroll:一个跨设备的鼠标触控规范器，为可滚动元素等提供支持
07-01
跨平台、跨输入（鼠标和触摸）、硬件加速、响应式滚动 HTML5 容器。 查看。 去做 写一些文档 向演示添加箭头 添加更多演示以展示其他功能 合并 recurseDisableElements 并静态添加到 TouchTracker，能够重置禁用的...
js禁止 鼠标滚轮事件
hailangtuteng的博客
10-11 7394
一段代码搞定 直接是禁止全局的鼠标滚轮事件  如果只需要单个模块 则把 window.onload = function() { window.onmousewheel = document.onmousewheel=function() {return false} } 里面的document 改为需要禁止的当前元素...
js 禁止鼠标滑轮滚动的事件
王旭东
05-22 682
如题，代码如下：   // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = [37, 38, 39, 40]; function preventDefault(e) { ...
js禁止鼠标滑轮_js 禁止鼠标滑轮滚动的事件
weixin_39959298的博客
02-01 174
如题，代码如下：// left: 37, up: 38, right: 39, down: 40,// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36var keys = [37, 38, 39, 40];function preventDefault(e) {e = e || window.event;if (e.prevent...
学习笔记 Javascript禁用鼠标滚轮
鱼乐无穷的专栏
07-31 861
当鼠标或者键盘触发某一事件时，在Javascript中，我们可以为这个事件设置相应的动作。当然浏览器本身甚至是操作系统也会有对某一事件的默认动作，这样除了由于我们设置了自己定义句柄而产生的动作之外，还会有默认的动作发生。 通过事件属性取消默认动作 DOM的Event对象，通过其preventDefault()方法来取消默认动作。在IE下，则是将event的retur
js 静止滚轮_js禁止页面滚动
weixin_39888943的博客
12-19 2204
开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看js实现整个页面禁止滚动：document.body.addEventListener('touchmove', function(e){e.preventDefault();}, { passive:false }); //passive 参数不能省略，用来兼容ios和androidpass...
js: 屏蔽鼠标滚轮滚动屏幕
Dastan2k的博客
01-22 323
屏蔽鼠标滚轮滚动屏幕 https://www.jb51.net/article/69975.htm
用代码实现禁用浏览器鼠标手势
最新发布
06-13
// 禁用鼠标手势 if (isEdge || isChrome || isFirefox) { document.addEventListener('wheel', function(e) { if (e.ctrlKey) { e.preventDefault(); } }, {passive: false}); } ``` 这段代码将检查当前...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值