我们先来看看回弹滚动在手机浏览器发展的历史:
- 早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;
- Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
- Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
- iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:
.xxx {
overflow
:
auto
;
/* auto | scroll */
-webkit-overflow-scrolling: touch;
}
|
PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:http://www.idangero.us/sliders/swiper/index.php