一 scroll使用三原则

mui中封装了一个scroll控件用于实现区域滚动，在使用区域滚动组件时候需要注意几个细节:
1.scroll控件有固定的dom结构
2.需手动初始化scroll控件
3.需要手动设置滚动区域的位置（一般设置为top和bottom）

1 固定DOM结构

  1. <div class="mui-scroll-wrapper">
  2.     <div class="mui-scroll">
  3.         <!--这里放置真实显示的DOM内容-->
  4.     </div>
  5. </div>

2 初始化scroll滚动控件

  1. // 常用配置项
  2. var options = {
  3.     scrollY: true, //是否竖向滚动
  4.     scrollX: false, //是否横向滚动
  5.     startX: 0, //初始化时滚动至x
  6.     startY: 0, //初始化时滚动至y
  7.     indicators: true, //是否显示滚动条
  8.     deceleration:0.0006 //阻尼系数,系数越小滑动越灵敏
  9.     bounce: true, //是否启用回弹
  10. }

示例：初始化scroll控件，设置滚动速度

  1. mui('.mui-scroll-wrapper').scroll({
  2.     deceleration: 0.0005 
  3.     //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  4. });

3 手动设置滚动区域位置

区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top,bottom,left,right值和height），为了方便，mui默认设置有个全屏类 .mui-fullscreen ，我们可以在scroll控件外面添加这个类，然后手动修改top和bottom值。

  1. .mui-fullscreen {
  2.     position: absolute;
  3.     top: 0;
  4.     right: 0;
  5.     bottom: 0;
  6.     left: 0;
  7. }

二 scroll其他封装方法

mui中iOS平台的下拉刷新（Android平台的下拉刷新使用的是双webview+原生滚动方案）、popover、可拖动式选项卡均使用了scroll组件。 为方便大家使用，mui还额外为scroll插件封装了部分方法。

1 滚动到特定位置

scrollTo( xpos , ypos [, duration] )
参数 说明
xpos 要在窗口文档显示区左上角显示的（即针对显示窗口的左上角为原点）文档的 x 坐标
ypos 要在窗口文档显示区左上角显示的（即针对显示窗口的左上角为原点）文档的 y 坐标
duration 滚动时间周期，单位是毫秒

示例：快速回滚到该区域顶部，代码如下：

  1. mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

2 滚动到底部位置

滚动到顶部的代码比较容易实现,坐标值设为0、0即可；但滚动到底部，需要计算该区域的实际高度，因此mui封装了scrollToBottom方法。

scrollToBottom(duration)
参数 说明
duration 滚动时间周期，单位是毫秒

3 横向滚动

横向滚动只需在scroll组件基础上添加 mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted 这三个class即可，(给子元素添加mui-control-item可加大文字间距增强体验)
示例如下:

  1. <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  2.     <div class="mui-scroll">
  3.         <a class="mui-control-item mui-active">
  4.             推荐
  5.         </a>
  6.         <a class="mui-control-item">
  7.             热点
  8.         </a>
  9.         <a class="mui-control-item">
  10.             北京
  11.         </a>
  12.         <a class="mui-control-item">
  13.             社会
  14.         </a>
  15.         <a class="mui-control-item">
  16.             娱乐
  17.         </a>
  18.         <a class="mui-control-item">
  19.             科技
  20.         </a>
  21.     </div>

参考文章：

mui组件通用CSS类