jquery - 如何为 Ipad 创建一个始终 float 在顶部的 div 而没有问题？

Question

我尝试使用 position fixed ，并在 Ipad 4 上测试，非常有问题。

1. 在页面上触摸拖动时，位置固定的 div 有时可以向下拖动。
2. 在放大/缩小时，div 位置变得疯狂一秒钟。
3. 当页面快速向下滚动时，div 非常闪烁和摇晃
4. jquery 滚动动画性能极差，造成卡顿

我的第二次尝试是将内容放在#container div 中，并将固定对象(实际上是菜单)放在容器外部，让#container overflow-y:scroll 和 hidden body 溢出。在Ipad 4上测试，问题是:

1. 动力停止了。这意味着当触摸滚动时，当用户手指离开时页面移动立即停止，通常在用户手指离开后它应该可以滑动一点。
2. 我试着把 webkit-overflow-scrolling:touch;对于#container，现在在ipad上它可以正常滑动但是在macbook firefox浏览器上，滚动被锁定，页面根本无法移动。
3. 如果我同时设置 overflow-y 和 webkit-overflow-scrolling:touch，ipad 将无法运行，但 firefox 会再次运行。

有没有关于为 Ipad 创建一个始终 float 在顶部的 div 而没有问题的建议？我认为这应该是一个普遍的问题。

Answer 1

我已成功将容器置于 -webkit-overflow-scrolling:touch 模式，您声称该模式不起作用。

再试一次:

#container {
  overflow:scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0px);
}