我正在考虑在这里实现解决方案: http://luxiyalu.com/scrolling-on-overlay/
当我在 firefox(模拟移动设备)中测试演示时，一切似乎都正常。
当我尝试在我的网站(使用 jquery mobile)中实现时，下面的主体会滚动。
我目前的处理方式是:
<body>
<div class="overlay">
<div class="overlay-content">
put popup/overlay stuff here
</div>
</div>
<div class="background-content">
<div data-role="page">
put normal page stuff here
</div>
</div> <!-- background-content-->
</body>
jquery mobile 是否有导致正文滚动的东西？我很惊讶它在演示中完全有效(没有某种类型的 body 固定定位)。但是我只会一点点 CSS，所以我很难排除故障。
谢谢!
编辑 1: 哇，我可以这么愚蠢，现在我知道关闭你的大脑并在不看东西的情况下复制粘贴绝不是一个好主意。
作者页面的 CSS 列为:
.overlay{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
.overlay-content {
height: 100%;
overflow: scroll;
}
}
括号乱七八糟，因此浏览器无法正确解释 css。请注意 .overlay 的右括号位于 .overlay-content 之后。
新问题: 修复此问题后，覆盖层显示并滚动直到它到达覆盖层的底部，然后下方的主体拾取滚动。 Terence-Hill 的回答实际上为我解决了 android 内置浏览器的这个问题。它停止了 body 滚动。但是， body 滚动问题似乎仍在发生 1) ios safari 2) 使用 webview 的 ios 应用程序 3) 使用 webview 的 android 应用程序。
知道为什么它可以在 android 默认浏览器中工作，但不能在其他 3 个浏览器中工作吗？
最佳答案
尝试添加:
body:not(.hide-overlay) {
overflow: hidden;
}
如果你想在 ios 上平滑滚动使用:
.overlay {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
关于javascript - 全屏覆盖而无需在移动设备上滚动(jquery mobile)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40554091/