移动端滚动穿透问题解决方案

问题

移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容。

方案一

首先我们尝试着用

//打开弹框时
$("html,body").css({"overlow":"hidden"});
//关闭弹框时
$("html,body").css({"overlow":"auto"});

发现在pc端起了作用,但在移动端还是不行,遮罩下面的可以滚动。overflow在移动端无效。

方案二

在弹出层的touchmove事件中调用preventDefault

如果弹出层本身是有滚动条的话,将会导致弹出层无法滚动。适用于弹出层本身不需要滚动(条)。

方案三

当弹出层本身需要滚动时,两个工具方法:

//打开弹框时
fixedBody:function(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
},
//关闭弹框时
looseBody:function() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}

在弹出层显示之前,记录当前的滚动位置,使body脱离文档流,把脱离文档流的body拉上去;
在关闭弹框层时,让body回到了文档流中,再滚回到老地方。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问题描述:移动端当有fixed遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,就是所谓的滚动穿透问题。 解...
    AmilyHao阅读 1,741评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,081评论 25 709
  • .pch文件也是一种头文件,它的内容能被项目中的其他所有源文件共享和访问。是一个预编译文件。 pch文件的作用: ...
    Andy_Ron阅读 371评论 0 4