因项目的需要，采用了MUI的滚动事件（scroll），遇到了不少的问题，做个记录，方便以后查询。问题一：引入MUI顶部滑动样式后，顶部滑动条全屏显示<div id=“slider” class=“mui-slider mui-fullscreen”> <div id=“sliderSegmentedControl” class=“mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted”> <div class=“mui-scroll”> <a class=“mui-control-item mui-active” href="#item1mobile" data-wid=“tab-top-subpage-1.html”> 全部 </a> <a class=“mui-control-item” href="#item2mobile" data-wid=“tab-top-subpage-2.html”> 家居生活 </a> <a class=“mui-control-item” href="#item3mobile" data-wid=“tab-top-subpage-3.html”> 北京 </a> <a class=“mui-control-item” href="#item4mobile" data-wid=“tab-top-subpage-4.html”> 社会 </a> <a class=“mui-control-item” href="#item5mobile" data-wid=“tab-top-subpage-5.html”> 娱乐 </a> </div> </div></div>解决方案：查看官方文档，文档说明：区域滚动组件默认为absolute定位，全屏显示。所以你需要手动删掉全屏这个类，即 mui-fullscreen问题二：没有滚动效果解决方案：根据官方文档：若使用区域滚动组件，需手动初始化scroll控件，因此，在需要用到该滚动效果的组件中，引入mui.js文件，并初始化import mui from ‘../../lib/mui/js/mui.js’; // 建了lib文件夹，存放mui相关文件mui(’.mui-scroll-wrapper’).scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});问题三：初始化之后报错控制台错误消息为：caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them。原因：webpack启用了严格模式，而MUI没有，所以两者冲突了。 解决方案：在.babelrc文件中加上：“ignore”: ["./src/lib/mui/js/.js" // 建了lib文件夹，存放mui相关文件]另一种解决方法：该方法试过，出现另一种报错：export ‘default’ (imported as ‘mui’) was not found in ‘../../lib/mui/js/mui.js’。不知道是不是因人而异呢==，有朋友成功了而我的不行23331. 安装babel-plugin-transform-remove-strict-modecnpm i babel-plugin-transform-remove-strict-mode -D2. 在.babelrc文件的plugins节点中配置：“transform-remove-strict-mode"问题四：终于可以滑动了，点击滑动报错：控制台错误消息为：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080解决方法： {touch-action: pan-y;}2016年Google I/O上提出的概念，目的是用来提升页面滑动的流畅度。问题五：顶部可以滑动之后，底部Tab不能切换控制台错误消息为：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080原因： Tab样式（也是MUI的）与MUI的JS文件冲突，具体什么冲突不清楚，有兴趣可以看源码，我还晕乎乎的 解决方法： 找到Tab栏mui-tab-item的所有样式，复制一份，重新赋予新的样式类名，如mui-tab-item-my问题六：刚进入页面无法滑动，要刷新之后方可滑动原因：滑动时机不对，如前面代码显示的那样，在导入mui后就初始化滑动控件，此时，当重新进入页面时，组件的DOM结构还未渲染好，就初始化，自然不会有效果。 解决方法：放到mounted钩子函数中，在这个生命周期函数中，DOM结构已被渲染好，可以初始化滑动控件mounted(){ // 初始化滑动控件 mui(’.mui-scroll-wrapper’).scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 });}