iOS滚动有时会卡住

  • 本文关键字:滚动 iOS ios css
  • 更新时间 :
  • 英文 :


我在iPhone(iOS 9.2)上的safari中遇到了奇怪的行为

如果您在桌面上 http://jsbin.com/vofubidaxe 看到此页面,则有3张熊猫图片,您可以滚动它

但是,如果您在iPhone Safari上看到它,有时(并非所有时间)您无法滚动它。滚动似乎卡住了(不确定卡住是否是描述行为的正确词)

在此处编辑 http://jsbin.com/vofubidaxe/edit?html,css,output

要点 https://gist.github.com/anonymous/938fc5f84222d8ed06cdcb7f6092da8d

导航标签有一个position: fixed,如果将其删除,滚动将恢复正常。

抱歉,如果这是野生动物园中的已知错误。如何修复?

在元素上添加position:fixed会将其从文档 DOM 中删除 - 因此熊猫图像不会在实际文档上呈现。

它有时会"卡住",因为可能是您触摸的气泡会到达文档 - 因此轻弹会强制文档滚动而不是固定元素。

解决方案是删除相对元素并为固定父元素提供高度 - 如果您希望它完全高度,请尝试添加top:0;right:0;bottom:0;left:0然后溢出它。

但是,这将在iPhone上运行,但会导致其他设备出现问题 - Android,Windows手机等,因为过度的元素支持不佳。

使用它肯定会起作用。在父标签中添加样式

style="display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch;"

溢出-y:滚动;

-网络套件溢出滚动:触摸;

最新更新