## Scroller
自然滾動組件，主要的應用場景有 彈窗內長規則、視差滾動頁面的內部滾動（豎向滾動），還有應用下載頁的介紹縮略圖的瀏覽（水平滾動）
### 調用方式
HTML 示意：
~~~
<div class="ui-scroller">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
~~~
這里定義兩個概念：wrapper 和 scroller。wrapper 即外層的包含 DOM，如 div.ui-scroller；scroller 即內部滾動的元素（wrapper 的第一個子元素，有且只有一個），如 <ul>。組件初始化的時候需要傳入 wrapper ('.ui-scroller')，類名無限制。實際滾動的是內部的 scroller ('<ul>')。對于 scroller 的標簽無要求。
調用方式相對簡單。需要注意的是：
* scroller 的寬/高必須大于 wrapper 的寬/高才能發生滾動
* 若要水平滾動，則 scrollY: false
~~~
/* 豎直滾動（fz 即 FrozenJS 的意思）*/
var scroll = new fz.Scroll('.ui-scroller', {
scrollY: true
});
/* 水平滾動 */
var scroll = new fz.Scroll('.ui-scroller', {
scrollY: false,
scrollX: true
});
~~~
### 配置說明
<table>
<tbody>
<tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
<tr>
<td>scrollX</td>
<td>boolean</td>
<td>false</td>
<td>水平滾動</td>
</tr>
<tr>
<td>scrollY</td>
<td>boolean</td>
<td>true</td>
<td>豎直滾動</td>
</tr>
<tr>
<td>bounce</td>
<td>boolean</td>
<td>true</td>
<td>反彈動畫</td>
</tr>
<tr>
<td>scrollTo(x, y)</td>
<td>function</td>
<td>-</td>
<td>滾動到具體坐標</td>
</tr>
<tr>
<td>scrollToElement(el, time, offsetX, offsetY)</td>
<td>function</td>
<td>-</td>
<td>滾動到具體坐標：el: 元素；time：滾動時間(ms)；offsetX：水平偏移量；offsetY：垂直偏移量。</td>
</tr>
<tr>
<td>getComputedPosition()</td>
<td>function</td>
<td>-</td>
<td>返回 scroller 當前的 {x:x, y:y} 坐標軸</td>
</tr>
<tr>
<td>enable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，開啟滾動</td>
</tr>
<tr>
<td>disable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，禁止滾動</td>
</tr>
<tr>
<td>refresh()</td>
<td>function</td>
<td>-</td>
<td>刷新當前位置</td>
</tr>
<tr>
<td>destroy()</td>
<td>function</td>
<td>-</td>
<td>銷毀對象</td>
</tr>
</tbody>
</table>
### DEMO演示
~~~
<!-- css -->
<style>
.ui-scroller {width:auto;height:300px;margin:20px;padding:10px;overflow:hidden;border:1px solid #ccc;}
.ui-scroller li {margin-bottom:10px;}
</style>
<!-- html -->
<div class="ui-scroller">
<ul>
<li>1、活動時間：2014.09.25 - 2014.10.31</li>
<li>2、活動面向“預付費（Q點Q幣、QQ卡、財付通/銀行卡）開通超級QQ”的用戶。以下支付方式的用戶不 在本次活動范圍內，“同時開通預付費超級QQ和短信版超級QQ”、“同時開通預付費超級QQ與短信版 會員”、“同時開通預付費超級QQ與iOS會員”、“開通短信版超級QQ”及“寬帶/固定電話/超級/”（相關活動可留意超級QQ官網消息）。</li>
<li>3、活動中，成長值的轉移規則：① QQ會員成長值 = 超級QQ成長值 -（超級QQ成長值/超級QQ成長速度）*（超級QQ成長速度 - 同條件下會員成長速度）② 若您在轉移前同時開通了超級QQ和QQ會員，轉移后會員成長值在上述成長值（超Q轉換而來）與原會員成長值間取較高者。較低部分，轉換成等值的QQ會員加倍成長卡贈送給您。</li>
<li>4、活動時間：2014.09.25 - 2014.10.311、活動間2014.09.25 - 2014.10.31、活動時間： 2014.09.25 - 活動時間活動時間活動時間 </li>
</ul>
</div>
<!-- js -->
<script>
(function() {
var scroll = new fz.Scroll('.ui-scroller', {
scrollY: true
});
// scroll.scrollTo(0, 200);
// 若 offsetX 和 offsetY 都是 true，則滾動到元素位于屏幕中央的位置；
scroll.scrollToElement("li:nth-child(3)", 1000, true, true);
})();
</script>
~~~
