移动端页面在IOS里滑动不顺畅解决办法

开发移动端的同学可能都知道，当在你用 overflow-y:scroll 属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统里，通常情况下，我们为了追求好的用户体验，会使用屏幕滚动插件better-scroll了，这个插件是真心好用，但是有些情况下我们可能并不想那么麻烦，而且页面的体验要求也没有那么高，下面给大家介绍一个简单偷懒的办法。

这时候可以使用 -webkit-overflow-scrolling:touch 这个属性，让滚动条产生滚动回弹的效果，就像IOS原生的滚动条一样流畅。

简单说明一下：

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

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

3. touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比；

需要注意的事项：

1. 通过动态添加内容撑开容器，结果根本不能滑动；

2. 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动；

3. 在safari上，使用了 -webkit-overflow-scrolling:touch 之后，页面偶尔会卡住不动；

解决问题的方法：

1. 第一步，将使用 -webkit-overflow-scrolling 的元素的定位取消或手动改成 position:static；

2. 第二步，将使用 -webkit-overflow-scrolling 的元素添加一个子元素，设置子元素的高度为height:101%，或者为了精确一些写成height:calc(100vh +1px)，注意这个加号前后都要有空格；