js实现鼠标滑动到某个div禁止滚动


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下

项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动。

这里主要是当鼠标滑动到该div时,监听滚轮事件并通过preventDefault()事件来阻止滚动事件,以下是例子

eg:

js实现鼠标滑动到某个div禁止滚动

#wrap {
  position:absolute;
  top:200px;
  background:#000000;
  font-size: 40px;
  width:50vw;
  text-align: center;
  color: #ffffff;
  line-height: 300px;
  height:300px;
}
<div id="wrap">
 鼠标移动进入该区域,页面禁止滚动
</div>
window.onload = function () {
  for (i = 0; i < 50; i++) {
  var x = document.createElement('div');
  x.innerHTML = "test<br/>";
  document.body.appendChild(x);
  }
 
  function $(x) {
  return document.getElementById(x);
  };
  $("wrap").onmousewheel = function scrollWheel(e) {
  var sl;
  e = e || window.event;
  if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
   event.returnValue = false;
  } else {
   e.preventDefault();
  };
  };
  if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
  //firefox支持onmousewheel
  addEventListener('DOMMouseScroll',
   function (e) {
   var obj = e.target;
   var onmousewheel;
   while (obj) {
    onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
    if (onmousewheel) break;
    if (obj.tagName == 'BODY') break;
    obj = obj.parentNode;
   };
   if (onmousewheel) {
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false; //禁止页面滚动
    if (typeof obj.onmousewheel != 'function') {
    //将onmousewheel转换成function
    eval('window._tmpFun = function(event){' + onmousewheel + '}');
    obj.onmousewheel = window._tmpFun;
    window._tmpFun = null;
    };
    // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
    setTimeout(function () {
     obj.onmousewheel(e);
    },
    1);
   };
   },
   false);
  };
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
原生js简单实现放大镜特效
May 16 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
原生js+css实现tab切换功能
Sep 17 #Javascript
vue使用screenfull插件实现全屏功能
Sep 17 #Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
JavaScript编码小技巧分享
Sep 17 #Javascript
如何利用node转发请求详解
Sep 17 #Javascript
前端性能优化建议
Sep 17 #Javascript
You might like
处理php自动反斜杠的函数代码
2010/01/05 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
mongodb和php的用法详解
2019/03/25 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
动态加载iframe
2006/06/16 Javascript
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
js结合正则实现国内手机号段校验
2015/06/19 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
业务经理岗位职责
2013/11/11 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
满月酒答谢词
2014/01/14 职场文书
九年级数学教学反思
2014/02/02 职场文书
小组合作学习反思
2014/02/18 职场文书
心理健康活动总结
2014/04/30 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2014教师年度工作总结
2014/11/10 职场文书
司机个人年终总结
2015/03/03 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis