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

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

 

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

 

jQuery扩展代码如下:

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

 

 

调用方法:

$(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 ? e.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 ? e.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>

 

转载于:https://www.cnblogs.com/JinkoWu/p/5220708.html

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值