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

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

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

最一开始考虑修改

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

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

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

-webkit-overflow-scrolling:

touch当手指从触摸屏上移开，会保持一段时间的滚动

-webkit-overflow-scrolling: auto

当手指从触摸屏上移开，滚动会立即停止

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

继续想办法

观察发现，手指快速上下滑动监听不到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

1.自定义滚动区域肯定要设置高度。

但是假设你的自定义区域就是mui-content区域。

2.使用的时候，应该把mui-content和mui-scroll-wrapper放在一起就可以了。这样就不需要设置高度了。

3.<div id="scroll" class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">

<div class="mui-loading">

<div class="mui-spinner">

</div>

</div>

</div></div>

最近用MUI做APP的混合开发的时候，遇到了两种跑马灯的功能需求，一种横向左右播放，再MUI的事例中有，但是上下播放再官方文档中没找到，就查了下资料，发现用JS可以完成该功能。

在页面中引入jquery.carouFredSel-6.1.0-packed.js（版本随意）

<!-- 消息轮播 -->

<div id="carousel">

<div id="msg"><a>19-05-10 10:21 用户123****1223充值「100」</a></div>

<div id="msg"><a>19-05-10 10:21 用户155****4321充值「200」</a></div>

<div id="msg"><a>19-05-10 10:21 用户181****3423充值「300」</a></div>

</div>

$(function() {

    $('#carousel').carouFredSel(

        responsive: true,

        direction: 'down',

        height: '26%',

        items: {

            height: 100,

            width: '750%',

            visible: {

                min: 1,

                max: 1

            }

        },

        scroll: {

            items: '-1'

        }

})

})

关于滚动方向，可以修改参数”direction“，默认值是”left“ 向左，可修改为”right“，”up“，”down“，分别对应右，上，下。

---