CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose
程序员文章站
2022-03-31 08:28:28
...
-webkit-overflow-scrolling 属性控制元素在移动设备上具有滚动回弹效果
Saferi 对于存在该属性的网页,会创建一个UIScrollView 提供子layer给渲染模块使用
参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
取值
auto 使用普通滚动,当手指从屏幕中移开时停止滚动
touch 使用具有回弹效果的滚动,滚动的速度与持续时间由滚动手势的强烈成正比
例子
HTML
CSS
.wrapper { overflow: auto; -webkit-overflow-scrolling: touch;}
但是 IOS Saferi 在滑动的时候会出现讨厌的 “橡皮筋效果” (Over Scroll)
详情知乎
https://www.zhihu.com/question/22256539注意及兼容性
硬件加速的系统级控件,所以效率很高但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用
iOS Safari 5.0 / Android 4.0 以上支持
推荐阅读
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose
-
炫!一组单元素实现的 CSS 加载进度提示效果_html/css_WEB-ITnose
-
CSS3实现各种格子纹理效果_html/css_WEB-ITnose
-
CSS3实现10种Loading效果_html/css_WEB-ITnose
-
CSS3实现了提交按钮等待打点循环效果_html/css_WEB-ITnose
-
想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
手机端分类页面的效果图实现_html/css_WEB-ITnose
-
css实现文字竖排效果_html/css_WEB-ITnose