本文實例為大家分享了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;
}
鼠標移動進入該區域，頁面禁止滾動
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);
};
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
