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 相关文章推荐
判断数组的最佳方法(推荐)
Oct 11 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Node.js API详解之 zlib模块用法分析
May 19 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
原生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作的文本留言本的例子(五)
2006/10/09 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python实现浪漫的烟花秀
2019/01/30 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
自我鉴定怎么写
2013/12/05 职场文书
学校标语大全
2014/06/19 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
婚庆司仪开场白
2015/05/29 职场文书
教师节感想
2015/08/11 职场文书
初中班主任工作随笔
2015/08/15 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Python turtle实现贪吃蛇游戏
2021/06/18 Python