在触屏设备中拖动 overflow 元素

在 Android 和 iOS 等触屏设备中，如果网页中某元素设置 overflow: auto 或者 overflow:scroll，那么问题就来了。在 Android 3.0 之前以及 iPhone OS 3.0 之前的自带浏览器中，你无法用手指拖动该元素所在区域，这样就相当于 overflow: hidden 了。在 Android 3.0 中，这个问题解决了，但是该溢出区域不会显示滚动条。而在 iPhone OS 3.0 中这个问题却是以另一种方式解决：我们只能用两个手指拖动溢出区域，而且该区域同样不会显示滚动条。一直到了 iOS 5.0，苹果公司才完整解决了这个问题，这时候可以单指拖动，而且可以通过设置 CSS 属性 -webkit-overflow-scrolling: touch; 以显示滚动条。

对于早期 Android 和 iOS 的这个问题，导致很多用户可能就不知道该区域可以拖动。为满足触屏用户，我们针对桌面浏览器设计好的页面布局，就需要作适当的调整。最简单的做法是改用 height:auto，如果此法不可行可以用 iScroll 4 这个 JavaScript 库。

对于 iframe 元素，也有类似的问题。我们可以将它放在一个大小确定的 div 中，并且设置该 div 的属性为 overflow:auto; -webkit-overflow-scrolling: touch; 。当然，iframe 元素也必须设置样式为 display:block; width: 100%; height: 100%; 。

对于非自带浏览器，Chrome for Android 是支持拖动溢出元素，而且开始也支持 -webkit-overflow-scrolling: touch; 属性，但是最近删除了这个属性。其它浏览器例如 Firefox Mobile 或者 Opera Mobile，有待测试。

参考资料：
[1] Div Overflow and iPhone Browsing
[2] Issue 6864 - android -Web browser - Inner Scrolling - Android
[3] Scrolling a overflow:auto; element on a touch screen device
[4] Android browser bug? div overflow scrolling - Stack Overflow
[5] Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决 - Cat的日志[6] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support
[7] scroll - Two finger iPhone scrolling - Stack Overflow
[8] Chrome Browser for Android no longer supports -webkit-overflow-scrolling?[9] Strategies for the iFrame on the iPad Problem[A] CSS2 in Mobile #overflow - quirksmode.org
[B] Overflow scrolling - barrow.io
[C] Overthrow - A overflow:auto polyfill for use in responsive design