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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
浅谈React之状态(State)
Sep 19 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
原生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生成短网址方法汇总
2016/07/12 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
PyQt5响应回车事件的方法
2019/06/25 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python with语句用法原理详解
2020/07/03 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
怎样声明子类
2013/07/02 面试题
应届中专生自荐书范文
2014/02/13 职场文书
小学教师培训方案
2014/06/09 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2015暑假假期总结
2015/07/13 职场文书
公司员工离职感言
2015/08/03 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server