解决iOS下滚动丢失惯性问题

在移动端h5中会出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉。

其实一行代码就可以实现。

-webkit-overflow-scrolling: auto | touch;

auto: 是自然滚动，手指松开后，就不再滚动。
touch: 手指松开后，会惯性滚动一段距离。

接下来说说，为什么这行代码会有如此效果。

-webkit-overflow-scrolling: touch 启用了硬件加速特性。实际上，在Safari是有用原生控件来实现的，对于有-webkit-overflow-scrolling: touch的网页，会创建一个UIScrollView，然后提供一个子layer给渲染模版使用。
在Webkit 108400版本左右支持，iOS Safari >=5.0,Android >= 4.0。

总结一下，对于我们前端来说，只需要知道css的一行webkit-overflow-scrolling是开启了硬件加速，让滑动流畅就可以了。

同时推荐2个插件，iScroll和better-scroll(可搭配vue使用)，better-scroll是基于iScroll进行了封装改进，但是个人认为：用法api都大同小异

最后，记录一下，如果不是做滑动列表，而是整个页面，如果感觉滚动区域有问题，可以这样检测一下：

找一下，页面css中是不是有怎么一块代码：

html, html body {
    position: relative;
    overflow-x: hidden;
    height: 100%
}

然后加一行这个：

body {
  overflow: initial !important;
}

应该就可以了～

最后的最后，今天看segmentfault中提到一行代码：

setTimeout(event, 0) 

可以解决移动端 页面滑动卡顿问题。