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

发布时间：2020-12-14 23:24:50 所属栏目：资源来源：网络整理

导读：我只是调试一个奇怪的场景,一旦覆盖层中的滚动运动到达其边界,它就会传递给底层元素.因此,当叠加层没有滚动空间时(因此当您敲击弹性顶部/底部时),背景层开始滚动. 我尝试了几种解决方案,并检查了这一个：Prevent body scrolling but allow overlay scrolling

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

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

解决方法

是的,这很烦人.尝试使用-webkit-overflow-scrolling：触摸叠加层,并在页面换行中使用-webkit-transform：translateZ(0).希望能帮助到你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!