ScrollFix.js：一個 iOS5 溢出滾動的（有限）修復方案

原貼地址：https://github.com/cssmagic/blog/issues/1

Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touch interactions when a scrolling section is bouncing/rubber banding. I don’t think this issue can be worked around (but would love to be proved wrong!). As such, I don’t advise the use of overflow: scroll for web apps until Apple provide a fix, I’d recommend continuing to use iScroll or Scrollability in the meantime!

更新：遺憾的是，這個腳本不能百分之百地解決問題，若是滾動區塊正處在橡皮筋效果的回彈過程當中，此時的觸摸交互沒法修正（譯註：有機會再詳述）。我認爲這個問題沒法變通解決（但我但願你能證實我錯了原）。所以，我不建議在 web app 中使用 overflow: scroll，除非未來 Apple 提供修復。我目前會推薦繼續使用 iScroll 或 Scrollability。

---

One of the things I was most looking forward to in iOS5 was the added support for overflow: scroll and the associated -webkit-overflow-scrolling: touch.

iOS5 最使人期待的一點，就是增長對 overflow: scroll 以及與之相關的 -webkit-overflow-scrolling: touch 的支持。

After a bit of use, there is at least one issue with the implementation that makes it difficult to use for full screen web apps. Fortunately there is a work around.

在稍加試用以後，我發現這個特性的實現方式至少存在一個問題——很難用於全屏的 web app。幸運的是，我找到了一個變通方法。

The newly supported overflow:scroll is a great addition to Mobile Safari’s arsenal and works well except under the following conditions:

這個新特性令 Mobile Safari 如虎添翼，十分好用，但如下狀況除外：

• The scroll area is at the top and the user tries to scroll up
• The scroll area is at the bottom and the user tries to scroll down.
• 滾動區域已經滾到頂部時，用戶試圖繼續向上滾動。
• 滾動區域已經滾到底部時，用戶試圖繼續向下滾動。

In a native app, you’d expect the content to rubber band but in Safari the whole page is scrolled instead.

在原生應用中，你會指望只有內容區呈現橡皮筋效果，但在瀏覽器中的效果是整個頁面都被拖動了。

Enter ScrollFix.js, a small script that works around this problem.

試試 ScrollFix.js 吧，一小段腳本就能夠變通解決這個問題。

ScrollFix works around this by manually offsetting the scrollTop value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.

ScrollFix 的原理是這樣的，在觸摸開始時，若是發現滾動區域已經處於極限狀態時，就手工設置 scrollTop 的值，將滾動內容向邊緣方向偏移 1px（這實際上改變了滾動區域的極限狀態），從而誘使瀏覽器對滾動區塊使用橡皮筋效果，而不會把觸摸事件向上傳播到 DOM 樹（引發整頁滾動）。

To better demonstrate the problem (and solution) here are a couple of videos:

爲了更好地演示這個問題（和解決方案），這裏放出兩個視頻（YouTube 需翻小牆）：

• iOS5 overflow scrolling without ScrollFix.js
• iOS5 overflow scrolling with ScrollFix.js
• 未使用 ScrollFix.js 的 iOS5 溢出滾動效果
• 已使用 ScrollFix.js 的 iOS5 溢出滾動效果

（譯註：同時附上後者的 在線演示，請使用 iOS 設備訪問。）

ScrollFix is a work in progress (there are still bugs!) and can be downloaded for free from GitHub. Please contribute code fixes or open tickets for discussion.

ScrollFix 仍然在開發中，還有一些 bug，但你能夠在 GitHub 免費下載（譯註：在原文發表後不久，這個項目就基本成熟了）。你能夠貢獻代碼，也能夠提交 issue 展開討論。

---

譯者後記

在 iOS5 發佈以前，構建 web app 的一個老大難問題就是局部滾動。實現相似原生應用的「頁頭固定 + 內容滾動」這一經典佈局，正是 web app 的一大痛點，這也催生了 iScroll 這類項目。

幸運的是，iOS5 對 overflow: scroll 的支持爲 web app 的 UI 進化提供了新的契機。本文做者的探索進一步將夢想變爲現實。

ScrollFix.js 用很是巧妙思路的解決了溢出滾動區域的觸摸交互問題，更有價值的是，它使用的是瀏覽器的原生滾動特性，而不是像 iScroll 這樣的模擬滾動實現。原生滾動帶來的好處是更少的性能消耗、更靈敏的觸控體驗，同時能夠與表單元素的交互行爲合睦相處。

本文做者是個完美主義者，他在文章開頭中提到的「小問題」實際上並無那麼嚴重（在 iOS 5.1 中已經很難重現，並且 iOS6 已經修復）。所以，個人建議是，若是你的項目只須要支持較高版本的 iOS 5+ 和 Android 4+，就果斷放棄 iScroll，擁抱輕巧順滑的原生滾動吧！