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

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

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

Javascript禁止子元素继承父元素的事件
3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...
一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
介绍我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
iframe子元素相对于父页面滚动条固定(iframe无滚动条，iframe固定高度有滚动条，两种情况)
一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { v ...
[问题记录]父元素position:relative的深坑
个人博客迁移至:https://blog.plcent.com/欢迎大家访问今天在写全屏切换的时候,发现一个问题就是切换时只能滚动第一屏,其他屏死都不动, 全屏滚动的原理: 是每次滚动父元素向上滚动 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relati ...
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
Javascript事件模型（二）：Javascript事件的父元素和子元素
DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...
jquery 禁止滚动条滚动，并且滚动条不消失，页面大小不闪动
一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...
jquery弹窗时禁止body滚动条滚动
当弹出一个jq提示窗口的时候,一般窗口右边还会有进度条的情况,禁止进度条方法禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidde ...

随机推荐

解析XML【C#】
1.XML元素XML元素包含一个开标记.元素中的数据.闭标记例如:<book>book name</book>其中book是元素名称 book name是元素数据元素名称区 ...
javascript中的动画的实现以及运动框架的编写（1）
大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...
table的样式定义
table的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式: <table cellspacing="0" cellpadding=&qu ...
浅谈 qmake 之 shadow build（就是将源码路径和构建路径分开）
shadow build shadow build 是什么东西?就是将源码路径和构建路径分开(也就是生成的makefile文件和其他产物都不放到源码路径),以此来保证源码路径的清洁. 这不是qmake ...
C语言的本质（26）——C标准库之数值字符串转换
C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. #include <stdlib.h> int atoi(const char *nptr); a ...
mfc窗口，父窗口parentwindow，所有者窗口ownerwindow 区别
一. parent:创建者,owner:所有者小玉的父母生下小玉,养到8岁,卖给贾府当丫头小玉的父母是parent,贾府是owner 二. 1.Pop-up窗口: 一个弹出窗口是必须具有WS_POP ...
[转]Geoserver实现WFS操作
From:http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/ wfs是OGC的标准规范,主要用于提供对矢量地理数据 ...
codeforces gym 100463I Yawner
//这题挂得让我怀疑我最近是不是做了什么坏事题意:一个人有两个集合,先在其中一个集合选一个数x,然后向右走x布,然后再在另一个集合里选一个数y,向左走y步,问是否能走完数轴上所有点. 解:显然是求g ...
ROW_NUMBER() OVER函数的基本用法用法【转】
语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...
iOS 键盘挡住UITextField
iOS经常使用的两个功能:点击屏幕和return隐藏虚拟键盘和解决虚拟键盘挡住UITextField的方法 iOS上面对键盘的处理非常不人性化,所以这些功能都须要自己来实现, 首先是点击return ...

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

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

随机推荐

热门专题