©
本文档使用 PHP中文网手册 发布
-webkit-overflow-scrolling：auto | touch
默认值：auto
适用于：块容器，伸缩盒容器，grid容器
继承性：无
动画性：否
计算值：指定值
auto：默认值。当手指从触摸屏上移开，滚动会立即停止，相当于普通的滚动效果。
touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆叠上下文。
该属性用来控制元素在移动设备上是否使用滚动回弹效果。
该属性在 iOS UIWebView 中无效。
该属性需与 overflow 属性配合使用，因为必须先定义元素允许滚动，才可以指定它在滚动具有回弹效果。
.demo { height: 200px; overflow-y: auto; /* 允许元素滚动，值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定义滚动时回弹效果 */ }
在移动设备上运行这个示例，将能感受到与 Native 相同的滚动回弹；
对应的脚本特性为webkitOverflowScrolling。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>-webkit-overflow-scrolling_CSS参考手册_web前端开发参考手册系列</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
html,
body {
overflow: hidden;
}
.demo {
height: 200px;
background-color: red;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div class="demo">
<h2>请在移动设备上查看本例</h2>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例