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 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 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中动态显示签名和ip原理
2007/03/28 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php魔术变量用法实例详解
2014/11/13 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
深入解析Python中的WSGI接口
2015/05/11 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
"引用"与指针的区别是什么
2016/09/07 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
教师节主题班会方案
2015/08/17 职场文书