摘要：同時(shí)，請(qǐng)?jiān)谄渌苿?dòng)端瀏覽器也這么處理，不要只對(duì)蘋果做這些處理。蘋果對(duì)于虎頭蛇尾的做法真讓人頭疼，這作風(fēng)跟巨硬真像。

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

最近在做iOS端的H5頁(yè)面時(shí)，遇到了一個(gè)定位問(wèn)題：
1、position: fixed 元素在頁(yè)面滾動(dòng)時(shí)屬性值變?yōu)閍bsolute，在頁(yè)面停止?jié)L動(dòng)瞬間，才恢復(fù)fixed；
2、當(dāng)使用 fixed 定位的元素，存在于進(jìn)行滾動(dòng)的容器元素內(nèi)時(shí)，拖動(dòng)容器元素會(huì)使出現(xiàn)閃動(dòng)問(wèn)題。

在尋求解決方案的過(guò)程中，看到了這一篇文章，對(duì)這個(gè)問(wèn)題的原因解釋得不錯(cuò)，故翻譯過(guò)來(lái)，供大家參考。
翻譯的過(guò)程中，對(duì)原文小標(biāo)題做了修改，方便大家閱讀。
翻譯不對(duì)的地方，也可以在評(píng)論中幫忙指出，謝謝。

隨著iOS 5的發(fā)布，fixed 定位據(jù)說(shuō)將會(huì)支持移動(dòng)端Safari。

當(dāng)然，這個(gè)說(shuō)法并不一定是真的，因?yàn)樵谙挛闹形覍⒔o大家展示各種各樣的bug。

順帶一提，在iOS 5的測(cè)試階段，我已經(jīng)向蘋果的bug報(bào)告工具上傳了一些bug，但天知道這個(gè)工具是怎么運(yùn)行的，所以我不知道這些問(wèn)題的編號(hào)（此處有爭(zhēng)議，原文：the issue numbers）。

更新：基于 Corey Duston 指出關(guān)于 position fixed 的更多bug，我已經(jīng)添加了 "scrolling == unusable position:fixed element"模塊。

我認(rèn)為對(duì)于一個(gè)好的app而言，不一定非要使用到 fixed 定位。但是，我也注意到有越來(lái)越多的 iOS app 開始使用 fixed 定位的工具欄，比如 mini-MobileSafaris，蘋果應(yīng)用商店的原生 Facebook app 和 Instagram。

AppStore via @devongovett, Facebook via @9eggs

我已經(jīng)創(chuàng)建了一些示例頁(yè)面，方便大家自行查看。（以下視頻來(lái)自油管，需要梯子）

如果你將 position: fixed 用任何正常的方式添加到桌面級(jí)頁(yè)面中，你就會(huì)在滑動(dòng)頁(yè)面的時(shí)候，看到一定程度的抖動(dòng)問(wèn)題。

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

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

眼尖的小伙伴可能已經(jīng)發(fā)現(xiàn)了視頻中的某些值發(fā)生了變化。我監(jiān)控了 window.scrollTop 和 window.pageYOffset（還有另一個(gè)值將會(huì)在下文提到）。你會(huì)注意到這兩個(gè)值只有在頁(yè)面滑動(dòng)完全停止后才會(huì)發(fā)生變化。

當(dāng)你想要在通訊錄APP中模擬碰撞和分流式頭部目錄時(shí)，這就是個(gè)問(wèn)題了。
（這句翻譯的不好，原文：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.）

如果頁(yè)面被放大到最大倍數(shù)，比如在 iOS 上，當(dāng)用戶將頁(yè)面從縱向旋轉(zhuǎn)到橫向后，再進(jìn)行任何比例超過(guò)1的縮放操作（比例放大），定位元素就會(huì)向上漂移。（我曾在其他網(wǎng)站見過(guò)元素徹底漂移出視窗的情況）

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

如果在 fixed 定位的元素中存在一個(gè)可以獲取焦點(diǎn)的元素，比如 input 元素，這就有可能導(dǎo)致整個(gè) fixed 元素跳到其他地方。這種情況只會(huì)在用戶滑動(dòng)頁(yè)面的時(shí)候出現(xiàn)（如果這正是你想要的效果，那當(dāng)我沒(méi)說(shuō) XD）。

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

Corey Dutson指出還有另一個(gè)與 fixed 有關(guān)的bug。盡管在他的示例中滾動(dòng)是通過(guò)JavaScript來(lái)實(shí)現(xiàn)，但核心問(wèn)題是：如果頁(yè)面是由腳本控制移動(dòng)，那么在移動(dòng)之后，fixed 定位的元素將不可使用。

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

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

盡管我還沒(méi)有找到這個(gè)bug的解決辦法，并且我覺(jué)得可能這是 MobileSafari 自身的渲染問(wèn)題，不過(guò)我還是會(huì)繼續(xù)看看是否有辦法解決。

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

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

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

所以當(dāng)我嘗試將這個(gè)辦法用在 body 元素上時(shí)，抖動(dòng)問(wèn)題還是存在，因?yàn)?fixed 定位元素仍然位于滾動(dòng)元素內(nèi)。

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

我同樣在真機(jī)上捕獲了這個(gè)問(wèn)題：點(diǎn)擊這里。

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

再來(lái)一次，仔細(xì)的小伙伴應(yīng)該也注意到了某些值又發(fā)生了改變。請(qǐng)注意，由于我已經(jīng)更改了CSS，因此 body 不再滾動(dòng)，所以左右的 0 值分別對(duì)應(yīng) window.scrollTop 和 window.pageYOffset。當(dāng)窗口不可滑動(dòng)時(shí)，內(nèi)容塊處于溢出狀態(tài)，值也就不會(huì)改變。

但是，content.scrollX 的值仍在變化——但這不是默認(rèn)的。

首先，你需要添加觸摸事件，用來(lái)在用戶滑動(dòng)（或者觸摸）時(shí)更新該值，所以在 JavaScript 中我可以添加：

content.ontouchstart = function() {};

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

然而，這依然是不完美的。你可以在上面的視頻中看到，值只會(huì)在我觸摸的時(shí)候更新。當(dāng)我的手指離開屏幕，讓頁(yè)面慣性滾動(dòng)時(shí)，值就不會(huì)更新了。

我仍會(huì)繼續(xù)嘗試有沒(méi)有可能獲取該值（無(wú)奈……）

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

同時(shí)，請(qǐng)?jiān)谄渌苿?dòng)端瀏覽器也這么處理，不要只對(duì)蘋果做這些處理。蘋果對(duì)于 position: fixed 虎頭蛇尾的做法真讓人頭疼，這作風(fēng)跟巨硬真像。

Posted 24-May 2012