jq怎么解决父盒子超过浏览器加遮罩层时还可以滑动滚动条

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq怎么解决父盒子超过浏览器加遮罩层时还可以滑动滚动条相关的知识，希望对你有一定的参考价值。

参考技术A 遮罩层出来的时候直接 overflow:hidden 遮罩层消失的时候，直接 overflow:auto 可以实现，注意 iphone 手机的safari浏览器不支持这个功能。本回答被提问者采纳

禁止遮罩层以下屏幕滑动

相信大家在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找了很多资料，大体就这两种做法，但都有不完善的地方。加上自己的思考和总结，想到一个办法，应该可以解决你的问题。

a）大众型

一般，大家想到的都是给body或者html添加overflow：hidden样式，当然height要设置成100%。这样在大多数机型上是可以的，但有个别的就是不起作用，我也不知道为什么（求知道的大神告知）。

b）高端型

因为这种需要弹窗遮罩的一般为移动端，pc很少会出现，就算是在pc里面上面那种方法也是可以解决的，所以可以考虑从移动端特有的滑动事件touchmove下手，当弹窗出现以后阻止该事件的默认行为不就行了吗，于是又有了下面的方法。

1 $(document).on("touchmove",function(e) {
2    e.preventDefault(); 
3 })

这种方法在移动端是可以解决滑动的问题，但有种情景就显得有点尴尬了，移动端屏幕本来就小，如果弹窗的内容过多也需要滑动（比如很长的活动规则），因为弹窗出现的时候已经禁止了滑动事件，那可如何是好？？？？

c）改进型

在这种情形之下我想到了另外一种完美的办法，就是在禁止滑动之前先做一下判断，如果是在弹窗中触发的滑动事件就不阻止默认行为，其他地方同上。判断那部分我是通过类名判断的，通过其他的方法也是可以的（比如id），具体如下：

$(document).on("touchmove",function(e) {
   if(e.target.className.indexOf("shadeBox") >= 0) {
        e.preventDefault();      
    } 
})

上面的类名shadeBox是弹窗的蒙层的类名。也就是在蒙层上面滑动，事件是被禁止的，剩下的一部分就是弹窗了，所以弹窗的内容可以滑动。

以上有什么说的不对的，或者第三种方法还有不试用的情景的，还望指出，大家共同学习进步\\(^o^)/~

更新说明：

　　当我把这个东西分享给身边人用的时候，最后还是发现了问题，果然群众的眼睛还是雪亮的。问题如下：

当弹框内容过多，弹框也需要滑动的时候，因为弹框内部没有禁止touchmove，所以是可以滚动的，问题是当滚动到最底部继续往下滑的时候，奇怪的事情就发生了，此时页面还是会发生滑动，(在最上面的时候和这道理一样)。

我想的是可能弹框内部touchmove冒泡，然后到body上发生滑动。于是在弹框内部组织冒泡不就行了，于是做如下调整：

$(document).on("touchmove",function(e) {
   if(e.target.className.indexOf("shadeBox") >= 0) {
        e.preventDefault();      
    } else {
        e.stopPropagation();     
    }
})

修改以后，发现然并卵。。。

不知道为什么弹框内部并没有组织touchmove的冒泡，好奇怪。求知道的大神不吝告之。

现在的想法是，监听滑动事件，当滑动到底部或者最顶端时，禁止touchmove，并根据手指滑动的方向来释放开touchmove事件，即顶部的时候往下滑是放开事件，最底部的时候向上滑是放开事件。

虽然这边说的简单，但要实现这一功能确实太麻烦，如果只是在h5页面里面，完全没必要花这么多时间和精力在这个上面，如果是APP，追求极致那就另当别论了。

再说上面的情况是弹框内容过多的时候也需要滑动，如果弹框不需要滑动，跳出弹框以后直接全局禁用touchmove就好了，就没有上面的问题了。

不知道还有没有更好的做法？？？？？

参考链接：http://www.cnblogs.com/gaohui/p/5819777.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Document</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				height: 1000px;
			}
			
			#mask {
				top: 0px;
				left: 0px;
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.7);
				display: none;
			}
			
			#mask .div {
				width: 300px;
				height: 300px;
				background: white;
				position: absolute;
				margin: auto;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				/* 第一种方法：屏蔽鼠标滚轮滚动和touchmove事件，比较暴力
				$("#cao").click(function() {
					$("#mask").show(0,function(){
						 $("body").css(\'overflow\',\'hidden\');
					});
				})
				$("#close").click(function() {
					$("#mask").hide(0,function(){
						$("body").css(\'overflow\',\'scroll\');
					});
				})
				*/
     			//第二种方法[推荐]，屏蔽触屏滑动事件，但是没有屏蔽鼠标滚轮滚动
				$("#cao").click(function() {
					$("#mask").show()
				});
                $("#mask").on(\'touchmove\',function(e){
                	e.preventDefault();  //阻止默认行为
                })
				$("#close").click(function() {
					$("#mask").hide()
				});

			})
		</script>
	</head>

	<body>
		<div id="mask">
			<div class="div">
				<h4 id="close">haha</h4>
			</div>
		</div>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<div id="cao" style="margin: 0 auto;width: 300px;height: 300px;background: red;">

		</div>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
		<p>111111111111111111111</p>
		<p>222222222222222222222</p>
		<p>333333333333333333333</p>
	</body>

</html>

　　此时屏蔽滚动和PC鼠标滚动，比较暴力！！！！

以上是关于jq怎么解决父盒子超过浏览器加遮罩层时还可以滑动滚动条的主要内容，如果未能解决你的问题，请参考以下文章

简单的，当页面出现遮罩层的时候禁止滑动。遮罩层消失的时候可以滑动

禁止遮罩层以下屏幕滑动