[译] ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案

[cssmagic]

[译] ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案

• Original: A (partial) fix for iOS5 overflow scrolling (ScrollFix.js)
• Translated by: cssmagic

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，拥抱轻巧顺滑的原生滚动吧！

---

© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

[cssmagic]

在线演示页面的二维码（请使用 iOS 设备访问）：

[edokeh]

顶一个！

[cssmagic]

@edokeh 刚到您的博客去转了一圈，学到很多。另外您在 Speaker Deck 提到的计账 web app 现在好像无法访问了。

[edokeh]

不敢当。。。小时候我可是看了不少您的 CSS 文章呢
另外您是如何挖掘到我那篇 Slide 的。。。
那个记账的 APP 已经是 2011 年的事情了，当时是个半成品，已经荒废很久了
不过最近正想着重启这个应用呢，因为换 Android 了，发现上面就没一个好用的记账 APP ，唉

[cssmagic]

@edokeh 顺着这条线：你的 GitHub → 你的博客 → Zepto 文章 → 你的 Speaker Deck → 计账 web app，呵呵。本来还想找你微博的，但找到的一个疑似的账号貌似停止更新了。果然还有小号。
话说这么多年我都没啥进步，惭愧，要加油。初学 Sea.js 就看过你的博文，很有帮助。既然神交已久，就不说“您”了。

[edokeh]

我看你也在做移动端web？看来以后可以有人多多交流了 😄

[cssmagic]

@edokeh 对，移动端的产品设计+前端开发。以后微博常联系。

[differui]

这里有个关于解决 overscroll 更好的方案：

http://apdevblog.com/optimizing-webkit-overflow-scrolling/

[ystarlongzi]

赞

[WenTao-Love]

大赞。。。

[fa-ge]

scrollfix存在很大的bug，在ios10 safari上测试，当我快速下滑时，总是一次正常滑动，一次还是会出现整体下滑

[cssmagic]

@fa-ge
抱歉，没有遇到过。在实际项目中应用还算稳定。可能我的动作还不够快 😂

[JulesCesar]

ios设备上 第一次下啦正常 如果松手 第二次来的话就会继续拉动这个页面下来

[rccoder]

嗯，bug 还是很重，不能用 😂

[cssmagic]

@JulesCesar @rccoder
😂 真这么严重？

我感觉比较稳定，已经在生产环境用了很久了。并且在 CMUI 中封装了一个组件 Scroll Box，感觉挺好用的。

[fa-ge]

@新版本的ios系统中没有了@JulesCesar 说的问题了。 @cssmagic

[rccoder]

@cssmagic 全面的滚动时比较容易出问题