CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

-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 以上支持

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3116427.html

(0)
上一篇 2025年3月29日 13:11:42
下一篇 2025年3月29日 13:11:49

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论