-webkit-overflow-scrolling

概述

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

值

auto

使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

touch

使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

示例

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

规范

尚未有相关规范。另在Apple提供的Safari CSS 参考文档中有所提及。

浏览器兼容性

 

• Desktop
 
• Mobile

 

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	未实现	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	未实现	?	?	5.0

相关链接：

• CSS-Tricks article with demo 
• -webkit-overflow-scrolling entry in Safari CSS Reference docs

 

body {
font-family: inherit;
background:#fff;
margin: 0 auto;
width: 100%;
max-width: 640px;
font-size: 0.14rem;
color: #333;
overflow: hidden;
}

.page-warp {
padding-top: 48px;
height:100%;
width: 100%;
-webkit-box-sizing : border-box;
overflow-y : auto;
-webkit-overflow-scrolling: touch;
position: absolute;

}

header {
width: 100%;
position: relative;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}