Javascript禁止父元素滚动条滚动， pc、移动端均有效

在网页中经常会遇到这样的场景，网页比较长有滚动条，然后网页内的某个内容块里面的内容也比较长，也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了，非常影响体验，特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单，但是适应能力不强的方法就是，给鼠标一上去的时候，给BODY加一个css 属性overflow：hidden !important; 这个方法在部分浏览器中没有效果，而且这个方法有个副作用，会让网页回到顶部。

那么我们可以通过js来实现。原理就是阻止事件冒泡和事件默认动作。阻止冒泡就为了当前块的滚动事件不会传递到父元素中，在移动端就是touchmove事件。其实现代码如下，通过扩展jQuery：

jQuery扩展代码如下：

 1 (function ($j) {
 2         $j.fn.uniqueScroll = function () {
 3             $j(this).on(‘mousewheel‘, _pc)
 4                     .on(‘DOMMouseScroll‘, _pc);
 5
 6             function _pc(e) {
 7
 8                 var scrollTop = $j(this)[0].scrollTop,
 9                         scrollHeight = $j(this)[0].scrollHeight,
10                         height = $j(this)[0].clientHeight;
11
12                 var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta : -(e.originalEvent.detail || 0);
13
14                 if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
15                     this.scrollTop = delta > 0 ? 0 : scrollHeight;
16                     e.stopPropagation();
17                     e.preventDefault();
18                 }
19             }
20
21             $j(this).on(‘touchstart‘, function (e) {
22                 var targetTouches = e.targetTouches ? targetTouches : e.originalEvent.targetTouches;
23                 $j(this)[0].tmPoint = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};
24             });
25             $j(this).on(‘touchmove‘, _mobile);
26             $j(this).on(‘touchend‘, function (e) {
27                 $j(this)[0].tmPoint = null;
28             });
29             $j(this).on(‘touchcancel‘, function (e) {
30                 $j(this)[0].tmPoint = null;
31             });
32
33             function _mobile(e) {
34                 if ($j(this)[0].tmPoint == null) {
35                     return;
36                 }
37
38                 var targetTouches = e.targetTouches ? targetTouches : e.originalEvent.targetTouches;
39                 var scrollTop = $j(this)[0].scrollTop,
40                         scrollHeight = $j(this)[0].scrollHeight,
41                         height = $j(this)[0].clientHeight;
42
43                 var point = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};
44                 var de = $j(this)[0].tmPoint.y - point.y;
45
46                 if (de < 0 && scrollTop <= 0) {
47                     e.stopPropagation();
48                     e.preventDefault();
49                 }
50
51                 if (de > 0 && scrollTop + height >= scrollHeight) {
52                     e.stopPropagation();
53                     e.preventDefault();
54                 }
55             }
56         }
57     })(jQuery);

调用方法：

$(element).uniqueScroll();

测试代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>uniqueScroll</title>
  6     <script type="text/javascript" src="jquery-1.11.js"></script>
  7 </head>
  8 <div id="test" style="width:200px;height:300px;overflow: scroll;background: gray;">
  9     <br>1
 10     <br>1<br>1
 11     <br>1<br>1
 12     <br>1<br>1
 13     <br>1<br>1
 14     <br>1<br>1
 15     <br>1<br>1
 16     <br>1<br>1
 17     <br>1<br>1
 18     <br>1<br>1
 19     <br>1<br>1
 20     <br>1<br>1
 21     <br>1<br>1
 22     <br>1<br>1
 23     <br>1<br>1
 24     <br>1<br>1
 25     <br>1<br>1
 26     <br>1<br>1
 27     <br>1<br>1
 28     <br>1<br>1
 29     <br>1<br>1
 30     <br>1<br>1
 31     <br>1<br>1
 32     <br>1<br>1
 33     <br>1<br>1
 34     <br>1<br>1
 35     <br>1<br>1
 36     <br>1<br>1
 37     <br>1<br>1
 38     <br>1<br>1
 39     <br>1<br>1
 40     <br>1<br>1
 41     <br>1<br>1
 42     <br>1<br>1
 43     <br>1<br>1
 44     <br>1
 45 </div>
 46 <body>
 47 <br>1
 48 <br>1
 49 <br>1
 50 <br>1
 51 <br>1
 52 <br>1
 53 <br>1
 54 <br>1
 55 <br>1
 56 <br>1
 57 <br>1
 58 <br>1
 59 <br>1
 60 <br>1
 61 <br>1
 62 <br>1
 63 <br>1
 64 <br>1
 65 <br>1
 66 <br>1
 67 <br>1
 68 <br>1
 69 <br>1
 70 <br>1
 71 <br>1
 72 <br>1
 73 <br>1
 74 <br>1
 75 <br>1
 76 <br>1
 77 <br>1
 78 <br>1
 79 <br>1
 80 <br>1
 81 <br>1
 82 <br>1
 83 <br>1
 84 <br>1
 85 <br>1
 86 <br>1
 87 <br>1
 88 <br>1
 89 <br>1
 90 <br>1
 91 <br>1
 92 <br>1
 93 <br>1
 94 <br>1
 95 <br>1
 96 <br>1
 97 <br>1
 98 <br>1
 99 <br>1
100 <br>1
101 <br>1
102 <br>1
103 <br>1
104 <br>1
105 <br>1
106 <br>1
107 <br>1
108 <br>1
109 <br>1
110 <br>1
111 <br>1
112 <br>1
113 <br>1
114 <br>1
115 <br>1
116 <br>1
117 <br>1
118 <br>1
119 <br>1
120 <br>1
121 <br>1
122 <br>1
123 <br>1
124 <br>1
125 <br>1
126 <br>1
127 <br>1
128 <br>1
129 <br>1
130 <br>1
131 <br>1
132 <br>1
133 <br>1
134 <br>1
135 <br>1
136 <br>1
137 <br>1
138 <br>1
139 <br>1
140 <br>1
141 <br>1
142 <br>1
143 <br>1
144 <br>1
145 <br>1
146 <br>1
147 <br>1
148 <script>
149
150     (function ($j) {
151         $j.fn.uniqueScroll = function () {
152             $j(this).on(‘mousewheel‘, _pc)
153                     .on(‘DOMMouseScroll‘, _pc);
154
155             function _pc(e) {
156
157                 var scrollTop = $j(this)[0].scrollTop,
158                         scrollHeight = $j(this)[0].scrollHeight,
159                         height = $j(this)[0].clientHeight;
160
161                 var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta : -(e.originalEvent.detail || 0);
162
163                 if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
164                     this.scrollTop = delta > 0 ? 0 : scrollHeight;
165                     e.stopPropagation();
166                     e.preventDefault();
167                 }
168             }
169
170             $j(this).on(‘touchstart‘, function (e) {
171                 var targetTouches = e.targetTouches ? targetTouches : e.originalEvent.targetTouches;
172                 $j(this)[0].tmPoint = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};
173             });
174             $j(this).on(‘touchmove‘, _mobile);
175             $j(this).on(‘touchend‘, function (e) {
176                 $j(this)[0].tmPoint = null;
177             });
178             $j(this).on(‘touchcancel‘, function (e) {
179                 $j(this)[0].tmPoint = null;
180             });
181
182             function _mobile(e) {
183                 if ($j(this)[0].tmPoint == null) {
184                     return;
185                 }
186
187                 var targetTouches = e.targetTouches ? targetTouches : e.originalEvent.targetTouches;
188                 var scrollTop = $j(this)[0].scrollTop,
189                         scrollHeight = $j(this)[0].scrollHeight,
190                         height = $j(this)[0].clientHeight;
191
192                 var point = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};
193                 var de = $j(this)[0].tmPoint.y - point.y;
194
195                 if (de < 0 && scrollTop <= 0) {
196                     e.stopPropagation();
197                     e.preventDefault();
198                 }
199
200                 if (de > 0 && scrollTop + height >= scrollHeight) {
201                     e.stopPropagation();
202                     e.preventDefault();
203                 }
204             }
205         }
206     })(jQuery);
207
208
209     $(‘#test‘).uniqueScroll();
210 </script>
211
212 </body>
213 </html>

时间： 2024-08-25 08:28:05

Javascript禁止父元素滚动条滚动， pc、移动端均有效

Javascript禁止父元素滚动条滚动， pc、移动端均有效的相关文章

Javascript禁止子元素继承父元素的事件

js禁止滚动条滚动并且隐藏滚动条

知识点：整个div而言如果判断滚动条滚动到底部

解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

js 禁止|阻止滚动条滚动

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

禁止浏览器滚动条滚动，但滚动条可以显示

javascript阻止子元素冒泡触发父元素的mouseover、mouseout

用Javascript获取页面元素的位置