在网页中经常会遇到这样的场景， 网页比较长有滚动条， 然后网页内的某个内容块里面的内容也比较长， 也具有滚动条。当鼠标移到内容块中使用滚动条来滚动查看内容到达底部或头部的时候，父元素的滚动条也就开始滚动了， 非常影响体验， 特别是选择东西的时候。我们需要在滚动的时候不允许父元素也跟着滚动。有一种非常简单， 但是适应能力不强的方法就是， 给鼠标一上去的时候， 给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 2 3 4 5uniqueScroll 6 7 89 1 10 1 1 11 1 1 12 1 1 13 1 1 14 1 1 15 1 1 16 1 1 17 1 1 18 1 1 19 1 1 20 1 1 21 1 1 22 1 1 23 1 1 24 1 1 25 1 1 26 1 1 27 1 1 28 1 1 29 1 1 30 1 1 31 1 1 32 1 1 33 1 1 34 1 1 35 1 1 36 1 1 37 1 1 38 1 1 39 1 1 40 1 1 41 1 1 42 1 1 43 1 1 44 1 4546 47 1 48 1 49 1 50 1 51 1 52 1 53 1 54 1 55 1 56 1 57 1 58 1 59 1 60 1 61 1 62 1 63 1 64 1 65 1 66 1 67 1 68 1 69 1 70 1 71 1 72 1 73 1 74 1 75 1 76 1 77 1 78 1 79 1 80 1 81 1 82 1 83 1 84 1 85 1 86 1 87 1 88 1 89 1 90 1 91 1 92 1 93 1 94 1 95 1 96 1 97 1 98 1 99 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 211 212 213