Question

我有一个响应式网站，其中菜单栏作为侧边栏（如FB应用程序），通过position: fixed;固定到右上角。到目前为止，除了iOS7与-webkit-overflow-scrolling: touch;的组合外，此工作正常。固定元素不会停留在其位置，而且在滚动完成后它会跳转到固定位置。

你们中有人有建议吗？

由于

Answer 1

我一直在为完全相同的问题奋斗一天，结论是，是的，当你将一个元素定位为' fixed '在容器中时，有一个错误> -webkit-overflow-scrolling：在Apple屏幕设备中触摸'。我找不到任何解决方法。 ' -webkit-transform：translate3d（0,0,0）'或' -webkit-backface-visibility：hidden '有所不同。

所以最后我通过重新组装我的html结构来实现它，所以固定元素不在可滚动容器内，位于上层。如果'body'是你的可滚动容器，也许不理想，但希望它为可能的解决方案提供一些亮点。

使用简化示例扩展它：

<body>
    <sidebar></sidebar>
    <div id="content-wrap">
        <article></article>
        <footer></footer>
    </div>
</body>

CSS看起来像：

sidebar{ position: fixed; } #content-wrap{ -webkit-overflow-scrolling: touch; }

基本上，底线是，不要将固定的元素定位在滚动触摸容器中。如果你不想处理那个iOS奇怪的问题，你必须把它拿出来。

Answer 2

每当按钮被触发以显示-webkit-overflow-scrolling div（位于滚动容器内）时，我就可以通过动态地将auto样式更改为position: fixed来解决此问题。 / p>

我只需添加dont-scroll类。

.container{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
    -webkit-overflow-scrolling: auto; /* The fix */
}

隐藏position: fixed div后（在我的情况下，当用户点击弹出模式上的“取消”按钮时），我会动态删除dont-scroll类以启用再次顺利滚动。

固定位置和webkit溢出触摸问题ios 7

2 个答案: