标签：
在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给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>
Javascript禁止父元素滚动条滚动， pc、移动端均有效
标签：
原文地址：http://www.cnblogs.com/JinkoWu/p/5220708.html
