CSS 實現移動設備滾動回彈效果
來自： http://ziming.info/2016/css-to-achieve-the-effect-of-mobile-device-rolling-rebound/
-webkit-overflow-scrolling 屬性控制元素在移動設備上具有滾動回彈效果
Saferi 對于存在該屬性的網頁，會創建一個UIScrollView 提供子layer給渲染模塊使用
參考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
取值
auto 使用普通滾動，當手指從屏幕中移開時停止滾動
touch 使用具有回彈效果的滾動，滾動的速度與持續時間由滾動手勢的強烈成正比
例子
HTML
<div class="wrapper">
<div class="scroller">
<!-- content -->
</div>
</div>
CSS
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
但是 IOS Saferi 在滑動的時候會出現討厭的 “橡皮筋效果” (Over Scroll)
注意及兼容性
硬件加速的系統級控件，所以效率很高但是這相對是耗更多內存的，最好在產生了非常大面積的overflow時才應用
iOS Safari 5.0 / Android 4.0 以上支持
</div> 本文由用戶 269934351 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！