IT工程師數位筆記本

介紹：

iscroll.js 是滑動事件。在手機上可以快速的滑動，用戶體驗很好。在線例子： 選擇套餐  

iScroll必須在調用之前實例化---用法

<script src="iscroll.js"></script>

<script>

　　function authload(){
　　　　myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });
　　　　myScroll_right = new IScroll('#right_Menu', { mouseWheel: true, click: true,checkDOMChanges:true,bounce:false });
　　}
　　window.onload=function(){
　　　　authload();
　　}

</script>

 iScroll里傳遞的參數：

　iScroll里的第二個參數允許你自定義一些內容，比如下面的這段代碼：      

<script>
      var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>

 　　第二個參數通常都是一個對象，像上面的這個例子里就設定了不顯示滾動條。常用的參數如下：
               hScroll                 false 禁止橫向滾動 true橫向滾動 默認為true
               vScroll                 false 精致垂直滾動 true垂直滾動 默認為true
               hScrollbar            false隱藏水平方向上的滾動條
               vScrollbar            false 隱藏垂直方向上的滾動條
               fixedScrollbar      在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置為true可以禁止滾動條超出
                                        scroller的可見區域。默認在Android上為true， iOS上為false
               fadeScrollbar  　  false 指定在無漸隱效果時隱藏滾動條
               hideScrollbar  　  在沒有用戶交互時隱藏滾動條 默認為true
               bounce            　啟用或禁用邊界的反彈，默認為true
               momentum     　 啟用或禁用慣性，默認為true，此參數在你想要保存資源的時候非常有用
               lockDirection       false取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）

　　　　　 checkDOMChanges: false, //是否自動檢測內容變化  

通用方法：

（1）refresh 在DOM樹發生變化時，應該調用此方法。

 setTimeout(function () { myScroll.refresh(); }, 0);

DOM樹發生變化,會自動更新列表   checkDOMChanges:true  例子如下：

var myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });

注：使用該方法的時候，需要在頁面中返回成功的函數里使用。（需后臺人員配合）

} );

（2）iScroll還提供了scrollTo, scrollToElement和scrollToPage三個方法讓你能夠通過javascript來控制滾動效果。

scrollTo(x, y, time, relative)：在指定的time時間內讓內容滾動條x/y的位置。

如myScroll.scrollTo(0, -100, 200) 在200毫秒內Y軸向下滾動100像素。 myScroll.scrollTo(0, 10, 200, true)可以實現相對當前位置在200毫秒內Y軸向上滾動10像素的效果。

例子：

var myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });
//滾動至頂部
myScroll_left.scrollTo(0,0);

scrollToElement(element, time)：在指定的時間內滾動到指定的元素。如 :

 myScroll.scrollToElement('li:nth-child(10)', 100); 
//在100毫秒內滾動到第10個li元素的位置。第1個參數可以用CSS3中的選擇器來篩選元素。

snapToPage(pageX, pageY, time)：在200毫秒內從第1頁滾動到第2頁（0代表第1頁，1代表第2頁）。這個使用SNAP功能的時候可以調用這個函數。

（3）detroy() 完全消除myscroll及其占用的內存空間

myscroll.destroy();
myScroll = null;

-----------參考網址-----------------

iScroll.js 用法參考 （share）