为固定高度的网页元素添加 iOS Safari 滚动「惯性效果」的方法

最近在做一个手机端的 Web 应用，需要建立一个和浏览器窗口一样大的固定高度的 div，并且允许里面包含的内容进行上下滚动。

完成这个事情非常简单：

div {
    height: 100%;
    overflow-y: auto;
}

但是实际在 iPhone 上测试时，发现 Safari（也包括很多 iOS App 内置浏览器使用的 UIWebView）竟然完全禁用掉了著名的「惯性滚动」效果。然而在桌面 Safari 是没问题的。听着似乎没啥，但是实际操作起来会感觉滑动时非常非常不爽。

虽然原因尚不清楚，但解决方法是有的，令人吃惊的是还非常简单：只有一条 CSS 属性即可解决问题。

-webkit-overflow-scrolling: touch;

有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决：

-webkit-transform: translate3d(0,0,0);

但是如果你通过这个属性把太多内容加入了内存会导致一些性能/卡顿问题。如何权衡就看各位了。

参考资料：

[1] http://stackoverflow.com/questions/9801687/using-webkit-overflow-scrolling-touch-hides-content-while-scrolling-dragging
[2] http://cooshtee.com/blog/2012/11/add-inertial-scrolling-to-a-fixed-height-div-in-ios/