【web前端】22.解决-webkit-overflow-scrolling:touch的bug

-webkit-overflow-scrolling:touch用来控制元素在移动设备上是否使用滚动回弹的效果，兼容Android和Ios的写法如下：

overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

取值

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

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

举个例子

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

浏览器兼容性

移动版Safari ios5.0+

Bug

当一个元素设置过position：absolute；或者position：reative；后再加-webkit-overflow-scrolling：touch；属性后，你会发现，滑动几次后可滚动区域会卡住，不能再滑动，这时给元素添加一个z-index值就可以了。

-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;