转载

CSS 实现移动设备滚动回弹效果

-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)

CSS 实现移动设备滚动回弹效果

详情知乎

https://www.zhihu.com/question/22256539

硬件加速的系统级控件，所以效率很高但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用

iOS Safari 5.0 / Android 4.0 以上支持

原文 http://ziming.info/2016/css-to-achieve-the-effect-of-mobile-device-rolling-rebound/

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。