摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。

原文地址：Issues with position fixed & scrolling on iOS
原文作者：Remy Sharp
譯文地址：移動端 fixed 和 scroll 問題
譯文作者：鎏金圣手火麒麟

最近在做iOS端的H5頁面時，遇到了一個定位問題：
1、position: fixed 元素在頁面滾動時屬性值變為absolute，在頁面停止滾動瞬間，才恢復fixed；
2、當使用 fixed 定位的元素，存在于進行滾動的容器元素內時，拖動容器元素會使出現閃動問題。

在尋求解決方案的過程中，看到了這一篇文章，對這個問題的原因解釋得不錯，故翻譯過來，供大家參考。
翻譯的過程中，對原文小標題做了修改，方便大家閱讀。
翻譯不對的地方，也可以在評論中幫忙指出，謝謝。

隨著iOS 5的發布，fixed 定位據說將會支持移動端Safari。

當然，這個說法并不一定是真的，因為在下文中我將給大家展示各種各樣的bug。

順帶一提，在iOS 5的測試階段，我已經向蘋果的bug報告工具上傳了一些bug，但天知道這個工具是怎么運行的，所以我不知道這些問題的編號（此處有爭議，原文：the issue numbers）。

更新：基于 Corey Duston 指出關于 position fixed 的更多bug，我已經添加了 "scrolling == unusable position:fixed element"模塊。

我認為對于一個好的app而言，不一定非要使用到 fixed 定位。但是，我也注意到有越來越多的 iOS app 開始使用 fixed 定位的工具欄，比如 mini-MobileSafaris，蘋果應用商店的原生 Facebook app 和 Instagram。

AppStore via @devongovett, Facebook via @9eggs

我已經創建了一些示例頁面，方便大家自行查看。（以下視頻來自油管，需要梯子）

如果你將 position: fixed 用任何正常的方式添加到桌面級頁面中，你就會在滑動頁面的時候，看到一定程度的抖動問題。

視頻鏈接：https://www.youtube.com/embed/yps8Ea5GO4I?fs=1&feature=oembed

請注意這是在模擬器上出現了該bug，但我同樣在 iPhone 真機上捕獲了相同的bug。
模擬地址：http://jsbin.com/3/ixewok/6/

眼尖的小伙伴可能已經發現了視頻中的某些值發生了變化。我監控了 window.scrollTop 和 window.pageYOffset（還有另一個值將會在下文提到）。你會注意到這兩個值只有在頁面滑動完全停止后才會發生變化。

當你想要在通訊錄APP中模擬碰撞和分流式頭部目錄時，這就是個問題了。
（這句翻譯的不好，原文：This is a problem if you want to monitor the page position to simulate effects like the bumping and shunting of category headings like you might see in the address book app.）

如果頁面被放大到最大倍數，比如在 iOS 上，當用戶將頁面從縱向旋轉到橫向后，再進行任何比例超過1的縮放操作（比例放大），定位元素就會向上漂移。（我曾在其他網站見過元素徹底漂移出視窗的情況）

視頻鏈接：https://www.youtube.com/embed/YIOdPf7jqK4?fs=1&feature=oembed
模擬地址：http://jsbin.com/3/ixewok/6/

如果在 fixed 定位的元素中存在一個可以獲取焦點的元素，比如 input 元素，這就有可能導致整個 fixed 元素跳到其他地方。這種情況只會在用戶滑動頁面的時候出現（如果這正是你想要的效果，那當我沒說 XD）。

視頻地址：https://www.youtube.com/embed/lrnvZDwgJRc?rel=0
模擬地址：http://jsbin.com/3/ixewok/8/

Corey Dutson指出還有另一個與 fixed 有關的bug。盡管在他的示例中滾動是通過JavaScript來實現，但核心問題是：如果頁面是由腳本控制移動，那么在移動之后，fixed 定位的元素將不可使用。

從截屏中我已經做了記錄，你可以通過iWebInspector看到，盡管 MobileSafari 已經在位置上渲染了 fixed 定位的元素，但它實際上并不在應該在的位置。當你再次觸碰和移動頁面時，真正的元素才會保持在正確的位置上。

視頻地址：https://www.youtube.com/embed/R2MzdeJSCKw?fs=1&feature=oembed
模擬地址：http://jsbin.com/3/ixewok/13/

盡管我還沒有找到這個bug的解決辦法，并且我覺得可能這是 MobileSafari 自身的渲染問題，不過我還是會繼續看看是否有辦法解決。

隨著 iOS 5 的發布，MobileSafari 同樣支持了 -webkit-overflow-scrolling: touch。這實際上是用于頁面內容的行內塊元素（這句不知如何翻譯：I mean inline with respect to the document）。

如果我在前文的示例中改變 css，并且設置 html、body、內容塊的高度為100%，然后將 scrolling touch 屬性應用到內容上，那么抖動就會消失了。然而，這并不能徹底解決問題。

有個巧妙的辦法是這樣的：確保使用 fixed 定位的元素不是一個“移動畫布”。這個示例展示了一個 fixed 元素放置在一個滾動元素的上方，但在dom結構中，它并不是滾動元素的子級。

所以當我嘗試將這個辦法用在 body 元素上時，抖動問題還是存在，因為 fixed 定位元素仍然位于滾動元素內。

視頻地址：https://www.youtube.com/embed/suXz5dKtlcA?rel=0

我同樣在真機上捕獲了這個問題：點擊這里。

模擬地址：http://jsbin.com/3/ixewok/10/

再來一次，仔細的小伙伴應該也注意到了某些值又發生了改變。請注意，由于我已經更改了CSS，因此 body 不再滾動，所以左右的 0 值分別對應 window.scrollTop 和 window.pageYOffset。當窗口不可滑動時，內容塊處于溢出狀態，值也就不會改變。

但是，content.scrollX 的值仍在變化——但這不是默認的。

首先，你需要添加觸摸事件，用來在用戶滑動（或者觸摸）時更新該值，所以在 JavaScript 中我可以添加：

content.ontouchstart = function() {};

touch 事件會發生在 start, end, move三個階段，并且只需要一個值集（翻譯的不好：a value set）。
（請注意，我并沒有嘗試直接將其設置為 true——這可能也能起作用）。

然而，這依然是不完美的。你可以在上面的視頻中看到，值只會在我觸摸的時候更新。當我的手指離開屏幕，讓頁面慣性滾動時，值就不會更新了。

我仍會繼續嘗試有沒有可能獲取該值（無奈……）

1、不要在滾動元素內部使用 position: fixed，否則它會出現抖動bug并且看起來很糟糕（我曾見過比視頻中抖動得更瘋狂的情況）。
2、確保使用 -webkit-overflow-scrolling: touch
3、如果你想要獲取 scroll 的相關值，請確保你在滾動元素上添加了 touch 的監聽事件。

同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于 position: fixed 虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。

Posted 24-May 2012