阻止移动端弹出层的滚动事件传递给底层的简单方法

在PC浏览器上,弹出层出现了后,要阻止滚动传递给底层的,只需要将body的Style设置: 

height: 100%;

overflow: hidden;

就能实现,可是移动端浏览器无论是Android还是iOS都无法阻止body滚动,怎么办呢?

其实只要将body的style加多一个属性:position:  fixed; 就OK啦!

JS实现:

function showLeftBar() {

if(leftBar.hidden) {//显示leftBar

leftBar.hidden=false;

body.style.overflow="hidden";

body.style.position="fixed";

}else{//隐藏leftBar

leftBar.hidden=true;

body.style.overflow="auto";

body.style.position="";

}

}

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,909评论 0 1
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,062评论 0 9
  • 久困梵笼不自己, 一朝顿悟度四时。 危楼凭须高百尺, 我欲独上揽青天。
    能否忘记自己阅读 293评论 0 3
  • 瑞雪兆丰年,对于我们这里来说这样的雪只能算幼儿阶段,不过今年的第一场雪,准时, 下雪地里是去不了了,索性在家泥墙,...
    五峰汇涵农牧阅读 272评论 0 0