iScroll 4的使用

時間  2019-11-20
標籤 iscroll 使用 简体版
原文   原文鏈接

概要

iScroll 4 這個版本徹底重寫了iScroll這個框架的原始代碼。這個項目的產生徹底是由於移動版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統上普遍使用）
提供了一種本地化的方式來對一個限定了高度和寬度的元素的內容進行滑動。很不幸的是，這種狀況下全部的web應用的頁面就不可以包含具備position:absolute的頭、頁尾或者是一個內容可滾動的
中間區域。

然而，Android系統最新修訂版已經能夠支持這種功能了（儘管支持的力度還不是特別好），Apple公司彷佛不太情願將one-finger滑動事件運用到div元素上。

除了之前版本的iScroll的特性之外，iScroll 4還包括以下的特性：

     （1）縮放（Pinch/Zoom）

    （2）拉動刷新（Pull up/down to refresh）

    （3）速度和性能提高

    （4）精確捕捉元素

    （5）自定義滾動條

      友情提示：iScroll 4並非iScroll 3的簡易替代版本，API文檔已經不同了。同時考慮到此版本正處於測試期，一些API可能會有細微的變化。

使用指南

在此文檔中你會發現不少例子來教會你如何快速上手iScroll腳本庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，可是這篇文章中倒是iScroll這個腳本庫的精髓之所在哦。

iScroll須要對所要進行滾動的元素進行初始化，而且不限定一個頁面中使用iScroll的元素的個數（這裏不考慮您的硬件配置）。滾動元素中內容的類型和長度在必定程度上將會影響iScroll腳本庫裏
能夠同時使用的元素的個數。

使用iScroll這個腳本庫時，DOM樹的結構要足夠簡單，移除沒必要要的標籤，儘可能避免過多的標籤嵌套使用。

最優的使用iScroll的結構以下所示：

javascript

複製代碼 
<div id="wrapper">

        <ul>

               <li></li>

               .....

        </ul>

</div>
複製代碼

 


在這個小例子中，ul標籤將會被滾動。iScroll必定要與滾動內容外面的wrapper進行聯繫纔會產生效果。

【注意事項】：

只有wrapper裏的第一個子元素才能夠滾動，若是你想要更多的元素能夠滾動，那麼你能夠試試下面的這種寫法：

css

複製代碼 
<div id="wrapper">

        <div id="scroller">

               <ul>

                    <li></li>

                     ...

                </ul>

                <ul>

                         <li></li>

                          ...

                </ul>

       </div>

</div>
複製代碼


在這個例子中，scroller這個元素能夠滾動，即使它包含兩個ul元素

iScroll必須在調用以前實例化，你能夠在下面幾種狀況下對iScroll進行實例化：

    （1）onDOMContentLoaded

    （2）onLoad

    （3）之內聯inline方式

下面咱們逐個來說講這三種用法的優缺點

ONDOMContentLoaded

        適用於滾動內容只包含文字、圖片，而且全部的圖片都有固定的尺寸

        使用方法：（在head標籤中添加以下代碼）

html

複製代碼 
        <script src="iscroll.js"></script>

        <script>

                 var myscroll;

                function loaded(){

                           myscroll=new iScroll("wrapper");

                 }

               window.addEventListener("DOMContentLoaded",loaded,false);

         </script>
複製代碼


         注意：myscroll這個變量是全局的，所以你能夠在任何地方調用它的函數onLoad

        有些時候在DOMContentLoaded的狀態下就初始化iScroll實際上是有點草率的，所以此時頁面的資源可能尚未所有加載完畢。若是你遇到了一些很怪異的行爲能夠試試下面的寫法：

java

複製代碼 
        <script src="iscroll.js"><script>

        <script>

                    var myscroll;

                    function loaded(){

                   setTimeout(function(){

                            myscroll=new iScroll("wrapper");

                     }，100 );

                }

                window.addEventListener("load",loaded,false);

         </script>
複製代碼



         這種狀況下iScroll會在頁面資源（包括圖片）加載完畢100ms以後獲得初始化，這應該是一種比較安全的調用iScroll的方式。jquery

inline初始化web


         這種狀況會在頁面加載到js的時候就進行調用，此方法不推薦使用，可是不少javascript的大牛都在用這種方式，我又有什麼理由不同意呢？

ajax

複製代碼 
         <script src="iscroll.js"></script>

                    <div id="wrapper">

                            <ul>

                                <li></li>

                                 ...

                          </ul>

                  </div>

        <script>

                   var myscroll=new iScroll("wrapper");

        </script>
複製代碼


        不過建議你使用一些框架的ready方法來安全調用iScroll（好比jquery裏的ready()）。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）
複製代碼


                爲了保持資源的完整性，建議去除滾動條拉動刷新（pull to refresh）

        自從Twitter和一些Apple的本地化應用出現了這個效果以後，這個效果就變得很是流行。你能夠看看這兒先一睹爲快。

       我最近把"pull to refresh"這個部分單分出來做爲iScroll的一個額外插件。你能夠點擊這兒看看pull to refresh是如何工做滴。你只須要作的就是自定義pullDownAction()這個方法。你可能須要一個ajax來加載新的內容，不過一旦DOM樹發生了變化要記得調用refresh這個方法來。須要記住的是在例子中咱們加了1秒的延遲來模擬網絡的延遲效果。固然，若是你不想使用這個延遲，那就把setTimeout方法去掉就好了。網絡

 

縮放(pinch / zoom)

        咱們不得不面對一個事實，那就是光有滾動其實沒什麼新意的。這就是爲何在iScroll 4這個版本里咱們容許你能夠放

        大和縮小。想要這個功能，只須要設置放大的參數zoom 爲true便可實現利用手勢來放大和縮小。你能夠看看這兒。

        雙擊放大和縮小的功能在iScroll 4裏也是獲得支持的。要使用縮放功能，你至少須要以下配置：

                var myScroll =new iScroll("wrapper",{zoom:true});

       若是你想對縮放功能進行深度的自定義的話可使用下面的一些選項：

               zoomMax   指定容許放大的最大倍數，默認爲4

      【注意事項】：若是想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在全部須要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實現，並且尤其重要的是，硬件的加速會佔用大量資源，要謹慎使用，不然你的應用可能就此崩潰。

捕捉元素（snap and snap to element）

        捕捉的功能會促使scroller去從新定義位置，這樣能夠製做更加花哨的傳送帶效果。點擊這裏有個小例子。

        默認狀況下，iScroll將scroller分紅四分體，或者是相同大小的wrapper。iScroll 4加入了這個屬性容許捕捉scroller裏的任何元素，不考慮外部wrapper的大小。若是你想要實現這樣的傳送帶效果，我建議你使用「quadrant」分割。最佳的設置以下：

複製代碼 
                 var myscroll=new iScroll("wrapper",{

                       snap:true,

                       momentum:false,

                       hScrollbar:false,

                       vScrollbar: false

                  });
複製代碼


          捕獲元素，能夠經過傳遞一個字符串來做爲查詢條件，以下：

複製代碼 
                var myscroll=new iScroll("wrapper",{

                      snap:"li",

                      momentum:false,

                      hScrollbar:false,

                      vScrollbar:false

                });
複製代碼

 

           在這個例子中scroller能夠捕捉到滾動區域中最左上角的li元素

 

自定義滾動條（custom scrollbars）

          在iScroll 4這個版本中，能夠利用一系列的css來自定義滾動條的呈現。能夠給滾動條添加一個class參數，以下：

                  var myscroll=new iScroll("wrapper",{

                     scrollbarClass: "myScrollbar"

                 });


          你能夠點擊這裏看一個小例子，在這個小例子裏，myScrollbarH這個類被添加到了水平滾動條上，myScrollbarV這個類則被添加給了垂直方向上的滾動條上了。須要提醒的是，滾動條是由兩個元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則表明的是滾動條自己。

           滾動條的HTML結構以下：

複製代碼 
                  <div class="myScrollbarV">

                          <div></div>

                  </div>

                 .myscrollbarV{

                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;

                  }

                .myScrollbarV > div {
                           position:absolute;
                           z-index:100;
                           width:100%;
                             /* The following is probably what you want to customize */
                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
                           border:1px solid #800;
                          -webkit-background-clip:padding-box;
                          -webkit-box-sizing:border-box;
                          -webkit-border-radius:4px;
                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
                 }
複製代碼


通用方法：

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

     （2）scrollTo()                     滾動到某個位置

               eg: myscroll.scrollTo(0,10,200,true);

     （3）scrollToElement()      滾動到某個元素

               eg: myscroll.scrolToElement("li:nth-child(10)",100);

     （4）detroy()                       徹底消除myscroll及其佔用的內存空間

                eg: myscroll.destroy()
複製代碼
 
原文：http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html
 
 
如下整理的iScroll參數以及其表明的意思： 
Java代碼   收藏代碼
  1. hScroll: true, //是否水平滾動  
  2. vScroll: true, //是否垂直滾動  
  3. x: 0, //滾動水平初始位置  
  4. y: 0, //滾動垂直初始位置  
  5. bounce: true, //是否超過實際位置反彈  
  6. bounceLock: false, //當內容少於滾動是否能夠反彈，這個實際用處不大  
  7. momentum: true, //動量效果，拖動慣性  
  8. lockDirection: true,  
  9. //當水平滾動和垂直滾動同時生效時，當拖動開始是否鎖定另外一邊的拖動  
  10. useTransform: true, //是否使用CSS形變  
  11. useTransition: false, //是否使用CSS變換  
  12. topOffset: 0, //已經滾動的基準值(通常狀況用不到)  
  13. checkDOMChanges: false, //是否自動檢測內容變化    

checkDOMChanges 這個不是十分靠得住，由於他目前是輪詢檢測offsetWidth、offsetHeight，而後纔去調自身的refresh 從新計算滾動區域，可是有時候只檢測這個不是很準.. 
Java代碼   收藏代碼
  1. // Scrollbar 的相關參數  
  2. hScrollbar: true, //是否顯示水平滾動條  
  3. vScrollbar: true, //同上垂直滾動條  
  4. fixedScrollbar: isAndroid, //對andriod的fixed  
  5. hideScrollbar: isIDevice,  //是否隱藏滾動條  
  6. fadeScrollbar: isIDevice && has3d, //滾動條是否漸隱漸顯  
  7. scrollbarClass: '', //字定義滾動條的樣式名  

經過scrollbar這些參數能夠配置iscroll的滾動條，經過scrollbarClass能夠本身定義一套滾動條的樣式。 
Java代碼   收藏代碼
  1. // Zoom 放大相關的參數  
  2. zoom: false, //默認是否放大  
  3. zoomMin: 1, //放大的最小倍數  
  4. zoomMax: 4, //最大倍數  
  5. doubleTapZoom: 2, //雙觸放大幾倍  
  6. wheelAction: 'scroll', //鼠標滾動行爲（還能夠是zoom）  

這個Zoom我以爲比較好用，對於一個固定顯示圖片區域的相似應用，能夠很是簡單的作到固定滾動，包括兩指放大的應用。 
wheelAction 這個參數是給PC的鼠標滾動定義的，能夠定義爲滾動鼠標滾輪放大。 
Java代碼   收藏代碼
  1. // 自定義 Events 的相關參數   
  2. onRefresh: null, //refresh 的回調，關於自身什麼時候調用refresh 後面會繼續談到  
  3. onBeforeScrollStart: function (e) { e.preventDefault(); },   
  4. //開始滾動前的時間回調，默認是阻止瀏覽器默認行爲  
  5. onScrollStart: null, //開始滾動的回調  
  6. onBeforeScrollMove: null, //在內容移動前的回調  
  7. onScrollMove: null, //內容移動的回調  
  8. onBeforeScrollEnd: null, 在滾動結束前的回調  
  9. onScrollEnd: null, //在滾動完成後的回調  
  10. onTouchEnd: null, //手離開屏幕後的回調  
  11. onDestroy: null, //銷燬實例的回調  
  12. onZoomStart: null,  
  13. onZoom: null,   
  14. onZoomEnd: null  

經過了解以上參數，你能夠很是容易的配置本身的iscroll 應用： 
你能夠經過onScrollEnd 事件回調在結束滾動後執行一段你本身的代碼 
你也能夠簡單的新建一個能夠經過雙觸放大的固定滾動區域。 
你也能夠什麼都不作，只是簡單的約定碰到邊界是否反彈，等等。 
Java代碼   收藏代碼
  1. var myscroll = new iScroll('wrapper', {  
  2.      hScroll: false, //是否水平滾動  
  3.      vScroll: true, //是否垂直滾動  
  4.      y: 10, //滾動垂直初始位置  
  5.      bounce : false  
  6. });  

固然，在使用時，若是對建立的iscroll 實例保存引用會有不少好處： 
你能夠在內容改變時，DOM結構發生改變時調用 myscroll.refresh() 來從新計算固定滾動區域的內容高度，從而使得你的iscroll工做正常。 
你也能夠在你的應用結束時，用過這個引用調用destroy方法來，銷燬這個iscroll 實例 
等等.... 
 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程