本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码，供大家参考，具体内容如下
项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。
这里主要是当鼠标滑动到该div时，监听滚轮事件并通过preventDefault()事件来阻止滚动事件，以下是例子
eg:
|
1
2
3
4
5
6
7
8
9
10
11
|
#wrap { position:absolute; top:200px; background:#000000; font-size: 40px; width:50vw; text-align: center; color: #ffffff; line-height: 300px; height:300px;} |
|
1
2
3
|
<div id="wrap"> 鼠标移动进入该区域，页面禁止滚动</div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
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); };} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_38519358/article/details/106780134
