惯性滚动时监听不到touch的相关事件解决办法

问题描述：

要实现的功能是购物车图标在手机浏览器中，手指上滑渐渐显示，下滑渐渐消失，手指快速上下滑动，图标也能相应有闪现；

但是在苹果新系统中手指快速上下滑动，当开始惯性滚动时候无法监听到touch的相关事件，图标会一直显示或隐藏，这是不符合要求的。

最一开始考虑修改

-webkit-overflow-scrolling

属性控制元素在ios移动设备上是否使用滚动回弹效果

参数

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

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

示例

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

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


但是关闭滚动惯性后，视觉上拖动的太慢了，不满足预期
继续想办法

触摸事件(Touch)+ CSS3动画(Transform,Transition)

观察发现，手指快速上下滑动监听不到touch相关事件的时候，滚动条是在一直滑动的，是可以监听到scroll事件的

如果把页面的scroll改为，由触摸事件(Touch)计算偏移量 和 CSS3动画(Transform,Transition)移动偏移量来实现，取消scroll，就不会出现惯性滚动了

这里我用了mui框架scroll(区域滚动)来实现，它不是用scroll来实现滚动的，而是监听滑动偏移量，然后使用Transform,Transition来实现滚动效果，正好是我需要的。

使用mui参考
http://dev.dcloud.net.cn/mui/ui/#scroll

注意：区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置mui-scroll-wrapper滚动区域的位置（top和height）

demo:https://github.com/MiuMiu-S/Work-Notes-180310