Question

我正在考虑在这里实施解决方案： 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有没有导致身体滚动的东西？我很惊讶它在演示中完全有效（没有某种类型的固定定位）。但我只知道一点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的回答实际上为我的内置浏览器解决了这个问题。它阻止了身体滚动。然而，身体滚动问题仍然似乎正在发生1）ios safari 2）ios app使用webview 3）android app使用webview。

任何线索为什么它可以在Android默认浏览器中工作而不是其他3？

Answer 1

尝试添加：

body:not(.hide-overlay) {
  overflow: hidden;
}

如果你想在ios上顺利滚动使用：

.overlay {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

全屏覆盖，无需在移动设备上滚动（jquery mobile）

1 个答案: