最近项目主页改版增加了一个动态效果，简单的说，当滚动条滚动到某个位置时，出现两个div。Android一切正常，如预期通过window.addEventListener('scroll',()=>{});效果还不错。但是到了ios，发现延迟严重，不流畅。起初我以为是延迟，但后来我发现不是。1、iOS监听滚动。为了减少开销，事件只会在滚动结束时触发，滚动过程中不会实时监听触发器。2、网上说用monitortouchmove代替monitorscroll，但是调试的时候发现touchmove的触发频率很低，视觉效果还是会有延迟。3、后来找了一些资料说是用了div里面的滚动（overflow:scroll），而不是整个页面的滚动。这种方法在ios上确实可以解决上面的问题，但是又带来了一个新的问题，就是ios的页面滑动会变得很卡，没有惯性。然后上网查了资料，找到了这个属性——webkit-overflow-scrolling。该属性控制元素是否在移动设备上使用滚动弹跳效果。当该值设置为touch时，会有弹跳效果。如果设置为auto，则当手指离开时滚动将立即结束。所以我在页面中设置了这个属性，它起作用了。....但是又出问题了，有的固定的不行等等。4、后来想到禁用滚动条，用touch+transform模拟滚动。最后使用better-scroll插件解决了这个问题，完美解决。在下一篇文章中，我将谈谈我在使用better-scroll时遇到的一些问题。
