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

时间：2021-08-02 13:22:41

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

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

jQuery扩展代码如下：

 $j.fn.uniqueScroll = function () {

             $j(this).on('mousewheel', _pc)

                 .on('DOMMouseScroll', _pc);

             function _pc(e) {

                 var scrollTop = $j(this)[0].scrollTop,

                     scrollHeight = $j(this)[0].scrollHeight,

                     height = $j(this)[0].clientHeight;

                 var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta : -(e.originalEvent.detail || 0);

                 if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {

                     this.scrollTop = delta > 0 ? 0 : scrollHeight;

                     e.stopPropagation();

                     e.preventDefault();

                 }

             }

             $j(this).on('touchstart', function (e) {

                 var targetTouches = e.targetTouches ? e.targetTouches : e.originalEvent.targetTouches;

                 $j(this)[0].tmPoint = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};

             });

             $j(this).on('touchmove', _mobile);

             $j(this).on('touchend', function (e) {

                 $j(this)[0].tmPoint = null;

             });

             $j(this).on('touchcancel', function (e) {

                 $j(this)[0].tmPoint = null;

             });

             function _mobile(e) {

                 if ($j(this)[0].tmPoint == null) {

                     return;

                 }

                 var targetTouches = e.targetTouches ? e.targetTouches : e.originalEvent.targetTouches;

                 var scrollTop = $j(this)[0].scrollTop,

                     scrollHeight = $j(this)[0].scrollHeight,

                     height = $j(this)[0].clientHeight;

                 var point = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};

                 var de = $j(this)[0].tmPoint.y - point.y;

                 if (de < 0 && scrollTop <= 0) {

                     e.stopPropagation();

                     e.preventDefault();

                 }

                 if (de > 0 && scrollTop + height >= scrollHeight) {

                     e.stopPropagation();

                     e.preventDefault();

                 }

             }

         };

调用方法：

$(element).uniqueScroll();

测试代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>uniqueScroll</title>

     <script type="text/javascript" src="jquery-1.11.js"></script>

 </head>

 <div id="test" style="width:200px;height:300px;overflow: scroll;background: gray;">

     <br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1<br>1

     <br>1

 </div>

 <body>

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <br>1

 <script>

     (function ($j) {

         $j.fn.uniqueScroll = function () {

             $j(this).on('mousewheel', _pc)

                     .on('DOMMouseScroll', _pc);

             function _pc(e) {

                 var scrollTop = $j(this)[0].scrollTop,

                         scrollHeight = $j(this)[0].scrollHeight,

                         height = $j(this)[0].clientHeight;

                 var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta : -(e.originalEvent.detail || 0);

                 if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {

                     this.scrollTop = delta > 0 ? 0 : scrollHeight;

                     e.stopPropagation();

                     e.preventDefault();

                 }

             }

             $j(this).on('touchstart', function (e) {

                 var targetTouches = e.targetTouches ? e.targetTouches : e.originalEvent.targetTouches;

                 $j(this)[0].tmPoint = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};

             });

             $j(this).on('touchmove', _mobile);

             $j(this).on('touchend', function (e) {

                 $j(this)[0].tmPoint = null;

             });

             $j(this).on('touchcancel', function (e) {

                 $j(this)[0].tmPoint = null;

             });

             function _mobile(e) {

                 if ($j(this)[0].tmPoint == null) {

                     return;

                 }

                 var targetTouches = e.targetTouches ? e.targetTouches : e.originalEvent.targetTouches;

                 var scrollTop = $j(this)[0].scrollTop,

                         scrollHeight = $j(this)[0].scrollHeight,

                         height = $j(this)[0].clientHeight;

                 var point = {x: targetTouches[0].pageX, y: targetTouches[0].pageY};

                 var de = $j(this)[0].tmPoint.y - point.y;

                 if (de < 0 && scrollTop <= 0) {

                     e.stopPropagation();

                     e.preventDefault();

                 }

                 if (de > 0 && scrollTop + height >= scrollHeight) {

                     e.stopPropagation();

                     e.preventDefault();

                 }

             }

         }

     })(jQuery);

     $('#test').uniqueScroll();

 </script>

 </body>

 </html>

相关文章