如何創建始終浮在頂部的div對於iPad沒有問題？

Question

我嘗試使用固定位置 ，並在Ipad 4上進行了測試，非常容易出錯。

1. 觸摸拖動頁面時，固定div的位置有時可以向下拖動 。
2. 在放大/縮小div 位置時，瘋狂了一秒鍾。
3. 當頁面快速向下滾動時，div 閃爍並發抖
4. jQuery滾動動畫性能極差，產生結結巴巴

我的第二次嘗試是將內容放在#container div內，然后將固定對象（實際上是菜單）放入容器外部，並讓#container溢出-y：滾動並隱藏主體溢出。 在Ipad 4上測試過，問題是：

1. 動量關閉了。 這意味着在觸摸滾動時，用戶放開手指，頁面移動會立即停止，通常，用戶放開手指后，頁面應該能夠滑動一點。
2. 我試圖把webkit-overflow-scrolling：touch; 對於＃容器，現在在ipad上它可以正常滑動，但是在macbook firefox瀏覽器上，滾動被鎖定，頁面根本無法移動。
3. 如果我將overflow-y和webkit-overflow-scrolling：都放在這兩者上，則ipad將不起作用，但Firefox將再次起作用。

關於創建始終浮在頂部的div的任何建議對於iPad沒有問題？ 我認為這應該是一個普遍的問題。

Answer 1

我已經成功地將容器置於-webkit-overflow-scrolling:touch模式，您聲稱該模式不起作用。

再試一次：

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