iOS7：在固定覆盖中滚动会导致正文滚动答案

【问题标题】：iOS7: Scroll in fixed overlay causes body scrollingiOS7：在固定覆盖中滚动会导致正文滚动
【发布时间】：2014-07-16 03:47:47
【问题描述】：

我只是在调试一个奇怪的场景，其中覆盖层中的滚动移动一旦到达其边界就会传递给底层元素。所以当覆盖层没有滚动空间时（因此当你点击弹性顶部/底部时），背景层开始滚动。

我尝试了几种解决方案，也检查了这个：Prevent body scrolling but allow overlay scrolling

但目前还没有修复。我已经附上了一个plunker，所以当你在你的iphone或ipad中打开它时你应该会看到效果。

假设我们有以下页面结构：

    <html>
        <body>
            <nav> <!-- The overlay -->
                <div></div> <!-- The scrollable container with appropriate overflows -->
            </nav>
            <div class="page-wrap"></div> <!-- Main content starts to scroll when overlay reaches bounds or ios top/bottom bars are displayed -->
        </body>
    </html>

干杯！

Plunkr：http://run.plnkr.co/g4WQrNibWNbz5lYr/

**注意：显示 ios 标题和底栏时似乎有问题。我将尝试添加视频以进行进一步说明**

【问题讨论】：

刚刚发现即使在pinterest.com上也会出现这种行为

标签： html css ios7 scroll overlay

【解决方案1】：

是的，这很烦人。尝试将 -webkit-overflow-scrolling: touch 用于覆盖，并在页面包装上使用 -webkit-transform: translateZ(0)。希望对您有所帮助。

【讨论】：

这是如何工作的？ -webkit-overflow-scrolling: touch 只会让可滚动元素更流畅，-webkit-transform: translateZ(0) 只会启用硬件加速。

【解决方案2】：

Javascript 修复

我们可以捕捉覆盖层上的触摸事件并停止传播到其他元素。

<nav id="overlay"> 

document.getElementById('overlay').addEventListener("touchmove", function(e) {
        e.preventDefault();
}, true);

这可以防止#overlay 处于活动状态时滚动div.page-wrap。

【讨论】：

它还可以防止覆盖层内的任何溢出滚动。
@evolutionxbox - 如果我们尝试使用更高 z-index 的 .page-warp 会怎样？