本文實例為大家分享了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);

};

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。