首页 >> js开发 >> JavaScriptjs实现鼠标滑动到某个div禁止滚动
JavaScriptjs实现鼠标滑动到某个div禁止滚动
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动。这里主要是当鼠标滑动到该div时,监听滚轮事件并通过preventDefault()事件来阻止滚动事件,以下是例子eg:
#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
鼠标移动进入该区域,页面禁止滚动
鼠标移动进入该区域,页面禁止滚动
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test
";
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);
};
}
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test
";
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);
};
}以上就是本文的全部内容,希望对大家的学习有所帮助。
#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
#wrap {
position:absolute;
top:200px;
background:#000000;
font-size: 40px;
width:50vw;
text-align: center;
color: #ffffff;
line-height: 300px;
height:300px;
}
鼠标移动进入该区域,页面禁止滚动
鼠标移动进入该区域,页面禁止滚动
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test
";
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);
};
}
window.onload = function () {
for (i = 0; i < 50; i++) {
var x = document.createElement('div');
x.innerHTML = "test
";
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);
};
}以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章:
- JavaScriptjs禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
- jsvue 验证两次输入的密码是否一致的方法示例js大全
- jsOpenlayers+EasyUI Tree动态实现图层控制js大全
- jsJS sort排序详细使用方法示例解析js大全
- jsvue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决js大全
- JavaScript原生js实现表格翻页和跳转
- JavaScriptjs通过canvas生成图片缩略图
- JavaScriptvue.js+element 默认提示中英文操作
- js如何手写简易的 Vue Routerjs大全
- jsvue 获取url参数、get参数返回数组的操作js大全