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

我有一个响应式网站，其菜单栏作为侧边栏（如FB应用程序），它通过position: fixed;固定在右上角。目前为止，除了iOS7和-webkit-overflow-scrolling: touch;之外，这项工作还不错。固定的元素不会停留在其位置，而且在滚动完成后它会跳到固定的位置。位置固定和webkit溢出触摸问题ios 7

你有没有人有建议？

感谢

来源

2014-09-21 supersize

作为一个随机猜测，你有没有尝试添加'-webkit-backface-visibility：hidden;'，它解决了我在webkit中遇到的一些最近的'position：fixed'问题。 – 2014-09-21 20:31:41

@AndiNorth谢谢你的尝试。我无法访问iOS 7 atm，但稍后会尝试一下！ – supersize 2014-09-21 23:16:10

我一直在挣扎完全相同的问题了整整一天，结论是肯定的，有当你与'容器内位置的元素为“固定”的错误-webkit-overflow-scrolling：touch'in Apple screen devices。我找不到任何工作。 '-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奇怪的问题，你必须把它拿出来。

来源

2014-11-25 11:33:32

作为用户提问的例子，您是否有任何代码可以与您的答案一致？ – Stewartside 2014-11-25 11:44:21

无论何时触发一个按钮以显示position: fixed div（位于滚动容器内），我都能够通过动态地将-webkit-overflow-scrolling样式更改为来解决此问题。

我简单地添加了dont-scroll类。

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

一旦position: fixed DIV是隐藏的（在我的情况下，当用户点击弹出模态的“取消”按钮），我动态删除dont-scroll类再次启用平滑滚动。

来源

2017-09-21 17:13:17

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

回答

相关问题