iscroll的理解

本文轉載自查看原文 2017-03-14 10:36 1957 web/ tools

1、

最佳的HTML結構如下：

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li> ... </ul>
</div>

iScroll作用於滾動區域的外層。在上面的例子中，UL元素能進行滾動。只有容器元素的第一個子元素能進行滾動，其他子元素完全被忽略。

最基本的腳本初始化的方式如下：

<script type="text/javascript">
　　var myScroll = new IScroll('#wrapper'); </script>

第一個參數可以是滾動容器元素的DOM選擇器字符串，也可以是滾動容器元素的引用對象。下面是一個有效的語法：

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

所以基本上你要么直接傳遞元素，要么傳遞一個querySelector字符串。因此可以使用css名稱代替ID去選擇一個滾動器容器,如下:

var myScroll = new IScroll('.wrapper');

注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只會作用到選擇器選中元素的第一個。如果你需要對多個對象使用iScroll，你需要構建自己的循環機制。

2、初始化

當DOM准備完成后iScroll需要被初始化。最保險的方式是在window的onload事件中啟動它。在DOMContentLoaded事件中或者inline initialization中做也可以，需要記住的是腳本需要知道滾動區域的高度和寬度。如果你有一些圖片在滾動區域導致不能立馬獲取區域的高度和寬度，iScroll的滾動尺寸有可能會錯誤。

為滾動起容器增加position:relative或者absolute樣式。這將解決大多數滾動器容器大小計算不正確的問題。

綜上所述，最小的iScroll配置如下：

　　 <head> ... <script type="text/javascript" src="iscroll.js"></script>
    <script type="text/javascript">
    　　var myScroll; 　　function loaded() { 　　 myScroll = new IScroll('#wrapper'); 　　} </script>
    </head> 　　... <body onload="loaded()">
    <div id="wrapper">
        <ul>
            <li>...</li>
            <li>...</li> ... </ul>
　　</div>

如果你有一個復雜的DOM結構，最好在onload事件之后適當的延遲，再去初始化iScroll。最好給瀏覽器100或者200毫秒的間隙再去初始化iScroll。

三、配置iScroll

在iScroll初始化階段可以通過構造函數的第二個參數配置它。

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

上面的例子示例了在iScroll初始化時開啟鼠標滾輪支持和滾動條支持。

在初始化后你可以通過options對象訪問標准化值。例如：

console.dir(myScroll.options);

上面的語句將返回myScroll實例的配置信息。所謂的標准化意味着如果你設置useTransform:true，但是瀏覽器並不支持CSS transforms，那么useTransform屬性值將為false。

四、基本功能

options.bounce

當滾動器到達容器邊界時他將執行一個小反彈動畫。在老的或者性能低的設備上禁用反彈對實現平滑的滾動有幫助。

默認值：true

options.click

為了重寫原生滾動條，iScroll禁止了一些默認的瀏覽器行為，比如鼠標的點擊。如果你想你的應用程序響應click事件，那么該設置次屬性為true。請注意，建議使用自定義的tap 事件來代替它（見下面）。

默認屬性：false

options.disableMouse
options.disablePointer
options.disableTouch

默認情況下，iScroll監聽所有的指針事件，並且對這些事件中第一個被觸發的做出反應。這看上去是浪費資源，但是在大量的瀏覽器/設備上兼容，特定的事件偵測證明是無效的，所以listen-to-all是一個安全的做法。

如果你有一種設備偵測的內部機制，或者你知道你的腳本將在什么地方運行，你可以把你不需要的事件禁用（鼠標，指針或者觸摸事件）。

下面的例子是禁用鼠標和指針事件：

var myScroll = new IScroll('#wrapper', { disableMouse: true, disablePointer: true });

默認值：false

options.eventPassthrough

有些時候你想保留原生縱向的滾動條但想為橫向滾動條增加iScroll功能（比如走馬燈）。設置這個屬性為true並且iScroll區域只將影響橫向滾動，縱向滾動將滾動整個頁面。

在移動設備上訪問event passthrough demo。注意，這個值也可以設置為'horizontal'，其作用和上面介紹的相反（橫向滾動條保持原生，縱向滾動條使用iScroll）。

options.freeScroll

此屬性針對於兩個兩個緯度的滾動條（當你需要橫向和縱向滾動條）。通常情況下你開始滾動一個方向上的滾動條，另外一個方向上會被鎖定不動。有些時候，你需要無約束的移動（橫向和縱向可以同時響應），在這樣的情況下此屬性需要設置為true。請參考 2D scroll demo。

默認值：false

options.keyBindings

此屬性為true時激活鍵盤（和遠程控制）綁定。請參考下面的Key bindings內容。

默認值：false

options.invertWheelDirection

當鼠標滾輪支持激活后，在有些情況下需要反轉滾動的方向。（比如，鼠標滾輪向下滾動條向上，反之亦然）。

默認值：false

options.momentum

在用戶快速觸摸屏幕時，你可以開/關勢能動畫。關閉此功能將大幅度提升性能。

默認值：true

options.mouseWheel

偵聽鼠標滾輪事件。

默認值：false

options.preventDefault

當事件觸發時是否執行preventDefault()。此屬性應該設置為true，除非你真的知道你需要怎么做。

請參考Advanced features中的preventDefaultException，可以獲取更多控制preventDefault行為的信息。

Default: true 默認值：true

options.scrollbars

是否顯示為默認的滾動條。更多信息請查看Scrollbar

默認值：false

options.scrollX
options.scrollY

默認情況下只有縱向滾動條可以使用。如果你需要使用橫向滾動條，需要將scrollX 屬性值設置為 true。請參考示例horizontal demo。

也可以參考freeScroll選項。

默認值：scrollX: false，scrollY: true

注意屬性 scrollX/Y: true 與overflow: auto有相同的效果。設置一個方向上的值為 false 可以節省一些檢測的時間和CPU的計算周期。

options.startX
options.startY

默認情況下iScroll從0, 0 (top left)位置開始，通過此屬性可以讓滾動條從不同的位置開始滾動。

默認值：0

options.tap

設置此屬性為true，當滾動區域被點擊或者觸摸但並沒有滾動時，可以讓iScroll拋出一個自定義的tap事件。

這是處理與可以點擊元素之間的用戶交互的建議方式。偵聽tap事件和偵聽標准事件的方式一致。示例如下：

element.addEventListener('tap', doSomething, false); \\ Native $('#element').on('tap', doSomething); \\ jQuery

你可以通過傳遞一個字符串來自定義事件名稱。比如：

tap: 'myCustomTapEvent'

在這個示例里你應該偵聽名為myCustomTapEvent的事件。

默認值：false

五、滾動條

滾動條不只是像名字所表達的意義一樣，在內部它們是作為indicators的引用。

一個指示器偵聽滾動條的位置並且現實它在全局中的位置，但是它可以做更多的事情。

先從最基本的開始。

options.scrollbars

正如我們在基本功能介紹中提到的，激活滾動條只需要做一件事情，這件事情就是：

var myScroll = new IScroll('#wrapper', { scrollbars: true });

當然這個默認的行為是可以定制的。

options.fadeScrollbars

不想使用滾動條淡入淡出方式時，需要設置此屬性為false以便節省資源。

默認值：false

options.interactiveScrollbars

此屬性可以讓滾動條能拖動，用戶可以與之交互。

默認值：false

options.resizeScrollbars

滾動條尺寸改變基於容器和滾動區域的寬/高之間的比例。此屬性設置為false讓滾動條固定大小。這可能有助於自定義滾動條樣式（如下）。

默認值：true

options.shrinkScrollbars

當在滾動區域外面滾動時滾動條是否可以收縮到較小的尺寸。

有效的值為：'clip' 和 'scale'。

'clip'是移動指示器到它容器的外面，效果就是滾動條收縮起來，簡單的移動到屏幕以外的區域。屬性設置為此值后將大大的提升整個iScroll的性能。

值'scale'關閉屬性useTransition，之后所有的動畫效果將使用requestAnimationFrame實現。指示器實際上有各種尺寸，並且最終的效果最好。

默認值：false

注意改變大小不是在GPU上執行的，所以'scale' 是在CPU上執行。

如果你的應用程序將在多種設備上運行，我建議你使用選項'scale'，或者設置'clip' 為 false (例如：在較老的設備上應該設置為'clip' ，而在桌面瀏覽器上應設置為'scale')。

請參考示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 6         <title>iScroll demo: scrollbars</title>
 7         <script type="text/javascript" src="js/iscroll.js"></script>
 8         <script type="text/javascript">
 9             var myScroll;  10             function loaded () {  11  myScroll = new IScroll('#wrapper', {  12  scrollbars: true,  13  mouseWheel: true,  14  interactiveScrollbars: true,  15  shrinkScrollbars: 'scale',  16  fadeScrollbars: true
 17  });  18  }  19  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  20         </script>
 21         <style type="text/css">
 22  * {
 23  -webkit-box-sizing: border-box;
 24  -moz-box-sizing: border-box;
 25  box-sizing: border-box;
 26             }
 27  html {
 28  -ms-touch-action: none;
 29             }
 30  body,ul,li {
 31  padding: 0;
 32  margin: 0;
 33  border: 0;
 34             }
 35  body {
 36  font-size: 12px;
 37  font-family: ubuntu, helvetica, arial;
 38  overflow: hidden; 
 39             }
 40  #header {
 41  position: absolute;
 42  z-index: 2;
 43  top: 0;
 44  left: 0;
 45  width: 100%;
 46  height: 45px;
 47  line-height: 45px;
 48  background: #CD235C;
 49  padding: 0;
 50  color: #eee;
 51  font-size: 20px;
 52  text-align: center;
 53  font-weight: bold;
 54             }
 55  #footer {
 56  position: absolute;
 57  z-index: 2;
 58  bottom: 0;
 59  left: 0;
 60  width: 100%;
 61  height: 48px;
 62  background: #444;
 63  padding: 0;
 64  border-top: 1px solid #444;
 65             }
 66  #wrapper {
 67  position: absolute;
 68  z-index: 1;
 69  top: 45px;
 70  bottom: 48px;
 71  left: 0;
 72  width: 100%;
 73  background: #ccc;
 74  overflow: hidden;
 75             }
 76  #scroller {
 77  position: absolute;
 78  z-index: 1;
 79  -webkit-tap-highlight-color: rgba(0,0,0,0);
 80  width: 100%;
 81  -webkit-transform: translateZ(0);
 82  -moz-transform: translateZ(0);
 83  -ms-transform: translateZ(0);
 84  -o-transform: translateZ(0);
 85  transform: translateZ(0);
 86  -webkit-touch-callout: none;
 87  -webkit-user-select: none;
 88  -moz-user-select: none;
 89  -ms-user-select: none;
 90  user-select: none;
 91  -webkit-text-size-adjust: none;
 92  -moz-text-size-adjust: none;
 93  -ms-text-size-adjust: none;
 94  -o-text-size-adjust: none;
 95  text-size-adjust: none;
 96             }
 97  #scroller ul {
 98  list-style: none;
 99  padding: 0;
100  margin: 0;
101  width: 100%;
102  text-align: left;
103             }
104  #scroller li {
105  padding: 0 10px;
106  height: 40px;
107  line-height: 40px;
108  border-bottom: 1px solid #ccc;
109  border-top: 1px solid #fff;
110  background-color: #fafafa;
111  font-size: 14px;
112             }
113         </style>
114     </head>
115     <body onload="loaded()">
116         <div id="header">iScroll</div>
117         <div id="wrapper">
118             <div id="scroller">
119                 <ul>
120                     <li>Pretty row 1</li>
121                     <li>Pretty row 2</li>
122                     <li>Pretty row 3</li>
123                     <li>Pretty row 4</li>
124                     <li>Pretty row 5</li>
125                     <li>Pretty row 6</li>
126                     <li>Pretty row 7</li>
127                     <li>Pretty row 8</li>
128                     <li>Pretty row 9</li>
129                     <li>Pretty row 10</li>
130                     <li>Pretty row 11</li>
131                     <li>Pretty row 12</li>
132                     <li>Pretty row 13</li>
133                     <li>Pretty row 14</li>
134                     <li>Pretty row 15</li>
135                     <li>Pretty row 16</li>
136                     <li>Pretty row 17</li>
137                     <li>Pretty row 18</li>
138                     <li>Pretty row 19</li>
139                     <li>Pretty row 20</li>
140                     <li>Pretty row 21</li>
141                     <li>Pretty row 22</li>
142                     <li>Pretty row 23</li>
143                     <li>Pretty row 24</li>
144                     <li>Pretty row 25</li>
145                     <li>Pretty row 26</li>
146                     <li>Pretty row 27</li>
147                     <li>Pretty row 28</li>
148                     <li>Pretty row 29</li>
149                     <li>Pretty row 30</li>
150                     <li>Pretty row 31</li>
151                     <li>Pretty row 32</li>
152                     <li>Pretty row 33</li>
153                     <li>Pretty row 34</li>
154                     <li>Pretty row 35</li>
155                     <li>Pretty row 36</li>
156                     <li>Pretty row 37</li>
157                     <li>Pretty row 38</li>
158                     <li>Pretty row 39</li>
159                     <li>Pretty row 40</li>
160                     <li>Pretty row 41</li>
161                     <li>Pretty row 42</li>
162                     <li>Pretty row 43</li>
163                     <li>Pretty row 44</li>
164                     <li>Pretty row 45</li>
165                     <li>Pretty row 46</li>
166                     <li>Pretty row 47</li>
167                     <li>Pretty row 48</li>
168                     <li>Pretty row 49</li>
169                     <li>Pretty row 50</li>
170                 </ul>
171             </div>
172         </div>
173         <div id="footer"></div>
174     </body>
175 </html>

View Code

滾動條樣式

如果你不喜歡默認的滾動條樣式，而且你認為你可以做的更好，你可以自定義滾動條樣式。第一步就是設置選項scrollbars的值為'custom'：

var myScroll = new IScroll('#wrapper', { scrollbars: 'custom' });

使用下面的CSS類可以簡單的改變滾動條樣式。

.iScrollHorizontalScrollbar，這個樣式應用到橫向滾動條的容器。這個元素實際上承載了滾動條指示器。
.iScrollVerticalScrollbar，和上面的樣式類似，只不過適用於縱向滾動條容器。
.iScrollIndicator，真正的滾動條指示器。
.iScrollBothScrollbars，這個樣式將在雙向滾動條顯示的情況下被加載到容器元素上。通常情況下其中一個（橫向或者縱向）是可見的

自定義滾動條樣式示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 6         <title>iScroll demo: styled scrollbars</title>
 7         <script type="text/javascript" src="js/iscroll.js"></script>
 8         <script type="text/javascript">
 9             var myScroll;  10             function loaded () {  11  myScroll = new IScroll('#wrapper', {  12  scrollX: true,  13  scrollbars: 'custom' 
 14  });  15  }  16  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  17         </script>
 18         <style type="text/css">
 19             /* Styled scrollbars */
 20  .iScrollHorizontalScrollbar {
 21  position: absolute;
 22  z-index: 9999;
 23  height: 16px;
 24  left: 2px;
 25  right: 2px;
 26  bottom: 2px;
 27  overflow: hidden;
 28             }
 29  .iScrollHorizontalScrollbar.iScrollBothScrollbars {
 30  right: 18px;
 31             }
 32  .iScrollVerticalScrollbar {
 33  position: absolute;
 34  z-index: 9999;
 35  width: 16px;
 36  bottom: 2px;
 37  top: 2px;
 38  right: 2px;
 39  overflow: hidden;
 40             }
 41  .iScrollVerticalScrollbar.iScrollBothScrollbars {
 42  bottom: 18px;
 43             }
 44  .iScrollIndicator {
 45  position: absolute;
 46  background: #cc3f6e;
 47  border-width: 1px;
 48  border-style: solid;
 49  border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
 50  border-radius: 8px;
 51             }
 52  .iScrollHorizontalScrollbar .iScrollIndicator {
 53  height: 100%;
 54  background: -moz-linear-gradient(left, #cc3f6e 0%, #93004e 100%);
 55  background: -webkit-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
 56  background: -o-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
 57  background: -ms-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
 58  background: linear-gradient(to right, #cc3f6e 0%,#93004e 100%);
 59             }
 60  .iScrollVerticalScrollbar .iScrollIndicator {
 61  width: 100%;
 62  background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
 63  background: -webkit-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
 64  background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
 65  background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
 66  background: linear-gradient(to bottom, #cc3f6e 0%,#93004e 100%);
 67             }
 68             /* end */
 69  * {
 70  -webkit-box-sizing: border-box;
 71  -moz-box-sizing: border-box;
 72  box-sizing: border-box;
 73             }
 74  html {
 75  -ms-touch-action: none;
 76             }
 77  body,ul,li {
 78  padding: 0;
 79  margin: 0;
 80  border: 0;
 81             }
 82  body {
 83  font-size: 12px;
 84  font-family: ubuntu, helvetica, arial;
 85  overflow: hidden;
 86             }
 87  #header {
 88  position: absolute;
 89  z-index: 2;
 90  top: 0;
 91  left: 0;
 92  width: 100%;
 93  height: 45px;
 94  line-height: 45px;
 95  background: #CD235C;
 96  padding: 0;
 97  color: #eee;
 98  font-size: 20px;
 99  text-align: center;
100  font-weight: bold;
101             }
102  #footer {
103  position: absolute;
104  z-index: 2;
105  bottom: 0;
106  left: 0;
107  width: 100%;
108  height: 48px;
109  background: #444;
110  padding: 0;
111  border-top: 1px solid #444;
112             }
113  #wrapper {
114  position: absolute;
115  z-index: 1;
116  top: 45px;
117  bottom: 48px;
118  left: 0;
119  width: 100%;
120  background: #ccc;
121  overflow: hidden;
122             }
123  #scroller {
124  position: absolute;
125  z-index: 1;
126  -webkit-tap-highlight-color: rgba(0,0,0,0);
127  width: 2000px;
128  -webkit-transform: translateZ(0);
129  -moz-transform: translateZ(0);
130  -ms-transform: translateZ(0);
131  -o-transform: translateZ(0);
132  transform: translateZ(0);
133  -webkit-touch-callout: none;
134  -webkit-user-select: none;
135  -moz-user-select: none;
136  -ms-user-select: none;
137  user-select: none;
138  -webkit-text-size-adjust: none;
139  -moz-text-size-adjust: none;
140  -ms-text-size-adjust: none;
141  -o-text-size-adjust: none;
142  text-size-adjust: none;
143             }
144  #scroller ul {
145  list-style: none;
146  padding: 0;
147  margin: 0;
148  width: 100%;
149  text-align: left;
150             }
151  #scroller li {
152  padding: 0 10px;
153  height: 40px;
154  line-height: 40px;
155  border-bottom: 1px solid #ccc;
156  border-top: 1px solid #fff;
157  background-color: #fafafa;
158  font-size: 14px;
159             }
160         </style>
161     </head>
162     <body onload="loaded()">
163     <div id="header">iScroll</div>
164     <div id="wrapper">
165         <div id="scroller">
166             <ul>
167                 <li>Pretty row 1</li>
168                 <li>Pretty row 2</li>
169                 <li>Pretty row 3</li>
170                 <li>Pretty row 4</li>
171                 <li>Pretty row 5</li>
172                 <li>Pretty row 6</li>
173                 <li>Pretty row 7</li>
174                 <li>Pretty row 8</li>
175                 <li>Pretty row 9</li>
176                 <li>Pretty row 10</li>
177                 <li>Pretty row 11</li>
178                 <li>Pretty row 12</li>
179                 <li>Pretty row 13</li>
180                 <li>Pretty row 14</li>
181                 <li>Pretty row 15</li>
182                 <li>Pretty row 16</li>
183                 <li>Pretty row 17</li>
184                 <li>Pretty row 18</li>
185                 <li>Pretty row 19</li>
186                 <li>Pretty row 20</li>
187                 <li>Pretty row 21</li>
188                 <li>Pretty row 22</li>
189                 <li>Pretty row 23</li>
190                 <li>Pretty row 24</li>
191                 <li>Pretty row 25</li>
192                 <li>Pretty row 26</li>
193                 <li>Pretty row 27</li>
194                 <li>Pretty row 28</li>
195                 <li>Pretty row 29</li>
196                 <li>Pretty row 30</li>
197                 <li>Pretty row 31</li>
198                 <li>Pretty row 32</li>
199                 <li>Pretty row 33</li>
200                 <li>Pretty row 34</li>
201                 <li>Pretty row 35</li>
202                 <li>Pretty row 36</li>
203                 <li>Pretty row 37</li>
204                 <li>Pretty row 38</li>
205                 <li>Pretty row 39</li>
206                 <li>Pretty row 40</li>
207                 <li>Pretty row 41</li>
208                 <li>Pretty row 42</li>
209                 <li>Pretty row 43</li>
210                 <li>Pretty row 44</li>
211                 <li>Pretty row 45</li>
212                 <li>Pretty row 46</li>
213                 <li>Pretty row 47</li>
214                 <li>Pretty row 48</li>
215                 <li>Pretty row 49</li>
216                 <li>Pretty row 50</li>
217             </ul>
218         </div>
219     </div>
220     <div id="footer"></div>
221     </body>
222 </html>

View Code

如果你設置resizeScrollbars: false，滾動條將是固定大小，否則它將基於滾動區域的尺寸變化。

請接着閱讀接下來的內容。

六、無限滾動

iScroll集成智能緩存系統，允許處理的使用(重用)一群元素幾乎無限數量的數據。

無限滾動開發的早期階段，盡管它可以被認為是穩定的，但它還沒有准備好被廣泛使用。

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6         <title>iScroll demo: infinite scrolling</title>
  7         <script type="text/javascript" src="../../build/iscroll-infinite.js"></script>
  8         <script type="text/javascript">
  9             /******************************************************************************
 10              *
 11              * For the sake of keeping the script dependecy free I'm including a custom
 12              * AJAX function. You should probably use a third party plugin
 13              *
 14              */
 15             function ajax (url, parms) {
 16                 parms = parms || {};
 17                 var req = new XMLHttpRequest(),
 18                     post = parms.post || null,
 19                     callback = parms.callback || null,
 20                     timeout = parms.timeout || null;
 21             
 22                 req.onreadystatechange = function () {
 23                     if ( req.readyState != 4 ) return;
 24             
 25                     // Error
 26                     if ( req.status != 200 && req.status != 304 ) {
 27                         if ( callback ) callback(false);
 28                         return;
 29                     }
 30             
 31                     if ( callback ) callback(req.responseText);
 32                 };
 33             
 34                 if ( post ) {
 35                     req.open('POST', url, true);
 36                     req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 37                 } else {
 38                     req.open('GET', url, true);
 39                 }
 40             
 41                 req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 42             
 43                 req.send(post);
 44             
 45                 if ( timeout ) {
 46                     setTimeout(function () {
 47                         req.onreadystatechange = function () {};
 48                         req.abort();
 49                         if ( callback ) callback(false);
 50                     }, timeout);
 51                 }
 52             }
 53             /*
 54              *****************************************************************************/
 55             
 56             var myScroll;
 57             
 58             function loaded () {
 59                 myScroll = new IScroll('#wrapper', {
 60                     mouseWheel: true,
 61                     infiniteElements: '#scroller .row',
 62                     //infiniteLimit: 2000,
 63                     dataset: requestData,
 64                     dataFiller: updateContent,
 65                     cacheSize: 1000
 66                 });
 67             }
 68             
 69             function requestData (start, count) {
 70                 ajax('dataset.php?start=' + +start + '&count=' + +count, {
 71                     callback: function (data) {
 72                         data = JSON.parse(data);
 73                         myScroll.updateCache(start, data);
 74                     }
 75                 });
 76             }
 77             
 78             function updateContent (el, data) {
 79                 el.innerHTML = data;
 80             }
 81             
 82             document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 83             
 84         </script>
 85         
 86         <style type="text/css">
 87             * {
 88                 -webkit-box-sizing: border-box;
 89                 -moz-box-sizing: border-box;
 90                 box-sizing: border-box;
 91             }
 92             
 93             html {
 94                 -ms-touch-action: none;
 95             }
 96             
 97             body,ul,li {
 98                 padding: 0;
 99                 margin: 0;
100                 border: 0;
101             }
102             
103             body {
104                 font-size: 12px;
105                 font-family: ubuntu, helvetica, arial;
106                 overflow: hidden; /* this is important to prevent the whole page to bounce */
107             }
108             
109             #header {
110                 position: absolute;
111                 z-index: 2;
112                 top: 0;
113                 left: 0;
114                 width: 100%;
115                 height: 45px;
116                 line-height: 45px;
117                 background: #CD235C;
118                 padding: 0;
119                 color: #eee;
120                 font-size: 20px;
121                 text-align: center;
122                 font-weight: bold;
123             }
124             
125             #footer {
126                 position: absolute;
127                 z-index: 2;
128                 bottom: 0;
129                 left: 0;
130                 width: 100%;
131                 height: 48px;
132                 background: #444;
133                 padding: 0;
134                 border-top: 1px solid #444;
135             }
136             
137             #wrapper {
138                 position: absolute;
139                 z-index: 1;
140                 top: 45px;
141                 bottom: 48px;
142                 left: 0;
143                 width: 100%;
144                 background: #ccc;
145                 overflow: hidden;
146             }
147             
148             #scroller {
149                 position: absolute;
150                 z-index: 1;
151                 -webkit-tap-highlight-color: rgba(0,0,0,0);
152                 width: 100%;
153                 -webkit-transform: translateZ(0);
154                 -moz-transform: translateZ(0);
155                 -ms-transform: translateZ(0);
156                 -o-transform: translateZ(0);
157                 transform: translateZ(0);
158                 -webkit-touch-callout: none;
159                 -webkit-user-select: none;
160                 -moz-user-select: none;
161                 -ms-user-select: none;
162                 user-select: none;
163                 -webkit-text-size-adjust: none;
164                 -moz-text-size-adjust: none;
165                 -ms-text-size-adjust: none;
166                 -o-text-size-adjust: none;
167                 text-size-adjust: none;
168             }
169             
170             #scroller ul {
171                 list-style: none;
172                 padding: 0;
173                 margin: 0;
174                 width: 100%;
175                 text-align: left;
176                 position: relative;
177             }
178             
179             #scroller li {
180                 position: absolute;
181                 width: 100%;
182                 top: 0;
183                 left: 0;
184                 -webkit-transform: translateZ(0);
185                 -moz-transform: translateZ(0);
186                 -ms-transform: translateZ(0);
187                 -o-transform: translateZ(0);
188                 transform: translateZ(0);
189                 padding: 0 10px;
190                 height: 40px;
191                 line-height: 40px;
192                 border-bottom: 1px solid #ccc;
193                 border-top: 1px solid #fff;
194                 background-color: #fafafa;
195                 font-size: 16px;
196             }
197         
198         </style>
199     </head>
200     <body onload="loaded()">
201     <div id="header">iScroll</div>
202     
203     <div id="wrapper">
204         <div id="scroller">
205             <ul>
206                 <li class="row">Row 1</li>
207                 <li class="row">Row 2</li>
208                 <li class="row">Row 3</li>
209                 <li class="row">Row 4</li>
210                 <li class="row">Row 5</li>
211                 <li class="row">Row 6</li>
212                 <li class="row">Row 7</li>
213                 <li class="row">Row 8</li>
214                 <li class="row">Row 9</li>
215                 <li class="row">Row 10</li>
216                 <li class="row">Row 11</li>
217                 <li class="row">Row 12</li>
218                 <li class="row">Row 13</li>
219                 <li class="row">Row 14</li>
220                 <li class="row">Row 15</li>
221     
222                 <li class="row">Row 16</li>
223                 <li class="row">Row 17</li>
224                 <li class="row">Row 18</li>
225                 <li class="row">Row 19</li>
226                 <li class="row">Row 20</li>
227                 <li class="row">Row 21</li>
228                 <li class="row">Row 22</li>
229                 <li class="row">Row 23</li>
230                 <li class="row">Row 24</li>
231                 <li class="row">Row 25</li>
232                 <li class="row">Row 26</li>
233                 <li class="row">Row 27</li>
234                 <li class="row">Row 28</li>
235                 <li class="row">Row 29</li>
236                 <li class="row">Row 30</li>
237             </ul>
238         </div>
239     </div>
240     
241     <div id="footer"></div>
242     
243     </body>
244 </html>

View Code

iscroll下載鏈接：GitHub-iscroll

更多內容參考：iScroll 5 API 中文版

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 運用webkit繪制渲染頁面原理解決iscroll4閃動的問題 iscroll的基本方法 iScroll的使用 iScroll使用【iScroll源碼學習04】分離IScroll核心【iScroll源碼學習00】模擬iScroll iScroll框架的使用和修改 iScroll5 API速查 react + iscroll5 iscroll中文文檔