-webkit-overflow-scrolling

语法:

-webkit-overflow-scrolling:auto | touch

默认值auto

适用于:块容器,伸缩盒容器,grid容器

继承性:无

动画性:否

计算值:指定值

取值:

auto:
默认值。当手指从触摸屏上移开,滚动会立即停止,相当于普通的滚动效果。
touch:
使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆叠上下文。

说明:

指定元素是否使用native-style(滚动回弹效果)来滚动溢出内容。
  • 该属性用来控制元素在移动设备上是否使用滚动回弹效果。
  • 该属性在 iOS UIWebView 中无效。
  • 该属性需与 overflow 属性配合使用,因为必须先定义元素允许滚动,才可以指定它在滚动具有回弹效果。

    CSS:

    .demo { height: 200px; overflow-y: auto; /* 允许元素滚动,值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定义滚动时回弹效果 */ }

    在移动设备上运行这个示例,将能感受到与 Native 相同的滚动回弹;

  • 对应的脚本特性为webkitOverflowScrolling

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0 2.0-40.0 4.0-45.0 6.0-8.0 15.0-29.0 5.0+ -webkit- 4.0+ -webkit- #1 18.0-42.0 -webkit- #1
  1. Android 4.0前期增加了快速回弹滚动效果,不过随后这个特性又被移除,目前为止 Android 上所有浏览器支持该属性但未实现回弹效果。

示例:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号:画漫画的程序员,每天早上8点30分准时推送:前端前沿资讯、大厂面试题、程序员轶事、职场感悟等,一起进步!

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界