Question

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

我尝试了几个解决方案，并检查了这个解决方案：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标题和底栏时，似乎有问题。我将尝试添加视频以供进一步说明**

Answer 1

是的，这很烦人。尝试使用 -webkit-overflow-scrolling：touch 进行叠加，并在页面换行中使用 -webkit-transform：translateZ（0）。希望它有所帮助。

Answer 2

Javascript修复

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

<nav id="overlay"> 

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

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

iOS7：滚动固定叠加层会导致正文滚动

2 个答案:

Javascript修复