'遮罩层滑动引发层下内容随之滑动'的解决方法
‘遮罩层滑动引发层下内容随之滑动’的解决方法
这两天在写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,要么有缺陷,第三种相较而言是比较全面的了.