'遮罩层滑动引发层下内容随之滑动'的解决方法

最新推荐文章于 2024-05-21 15:42:43 发布

追风筝的小狮子

最新推荐文章于 2024-05-21 15:42:43 发布

阅读量4.1k

点赞数 1

分类专栏： web前端文章标签： web 前端滑动穿透遮罩层滑动禁止滑动

本文链接：https://blog.csdn.net/sinat_33587403/article/details/79631454

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

‘遮罩层滑动引发层下内容随之滑动’的解决方法

这两天在写Demo时发现了一个问题,就是在遮罩层滑动,层下的原有内容也会随之滑动.网上搜了下,才知道这是「滑动穿透」问题.
看了很多资料后,发现大多都围绕以下3种解决方法:

overflow:hidden

这种方法的思路在于”禁用滑动”.即

.fix{
 heigth:100%;
 overflow:hidden;
}

当点击事件触发’弹出’后,给body元素添加fix类的样式,则会使body中所有的滑动条都被禁用,自然就不存在上下层都被滑动的问题.

<body>
 <div class='background'></div>
 <button></button>
 <div class='mask' style='display:none;'></div>
</body>
<script>
 $('button').on('click',function(){
     $('body').classList.add('fix');
     $('.mask').css({
      'display':'block'
     });
 });
</script>

但这种方法存在一些问题,如果遮罩层有很多内容,因为滑动条的禁用,使得无法滑动看到后面的内容了.解决方法是

.mask{overflow:scroll}

这里特别需要记得的是,当遮罩层关闭后,要记得将.fix类移除,即将body设为,overflow:auto,否则背景层将无法滑动.

touchmove + preventDefault

$('.mask').on('touchmove',function(e){
    e.preventDefault();
});

这种方法的思路在于禁用遮罩层的滑动事件.但缺点也是,遮罩层内容过多时,无法滑动.

position:fixed;

.fix{
  position:fixed;
}
.mask{
  overflow:auto;
}

<body>
 <div class='background'></div>
 <button></button>
 <div class='mask' style='display:none;'></div>
</body>
<script>
 var scrollTop;
 $('button').on('click',function(){
     $('.mask').css({
      'display':'block'
     });
     $('body').classList.add('fix');
     scrollTop = document.scrollingElement.scrollTop;
     document.body.style.top = -scrollTop + 'px';
     }
 $('.mask').on('click',function(){
     $('.mask').css({
      'display':'none'
     });
     $('body').classList.remove('fix');
     document.scrollingElement.scrollTop = scrollTop;
 });
</script>

这种方法的思路在于,当出现遮罩层后,获取滑动高度,然后设置背景层为fixed,并设置Top的值为滑动高度,即固定背景层,让它不要滑动.同时遮罩层也可根据自己的内容任意滑动.当弹出层消失后,恢复背景层原来的position状态,再设置滑动条的高度为弹出之前的高度,即可让背景层停留在弹出内容之前的位置状态.
综合这3种方法而言,前两个要么要去修改很多css,要么有缺陷,第三种相较而言是比较全面的了.

追风筝的小狮子

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
'遮罩层滑动引发层下内容随之滑动'的解决方法

‘遮罩层滑动引发层下内容随之滑动’的解决方法这两天在写Demo时发现了一个问题,就是在遮罩层滑动,层下的原有内容也会随之滑动.网上搜了下,才知道这是「滑动穿透」问题. 看了很多资料后,发现大多都围绕以下3种解决方法:overflow:hidden这种方法的思路在于”禁用滑动”.即.fix{ heigth:100%; overflow:hidden;}当点击事件触...
复制链接

扫一扫