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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
JS实现简单抖动效果
Jun 01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 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开发框架myqee新手快速入门教程
2014/07/14 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python之Character string(实例讲解)
2017/09/25 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python logging设置和logger解析
2019/08/28 Python
Python流程控制常用工具详解
2020/02/24 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
党校个人总结
2015/03/04 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
捐款通知怎么写
2015/04/24 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫