本文目錄一覽：
node.js中clearInterval失效
你應該把你的代碼貼出來。我猜你可能是執行了兩遍intervalId = setInterval()。
如何使用iscroll.js插件
如何使用iscroll.js插件
A-A+
前端博客•前端開發資源 | 移動前端開發•JavaScript | JavaScript插件•5010View0
文章目錄
入門
初始化
參數配置
理解核心
滾動條
滾動的編程介面
scrollTo(x, y, time, easing)
scrollBy(x, y, time, easing)
scrollToElement(el, time, offsetX, offsetY, easing)
對齊
goToPage(x, y, time, easing)
縮放
刷新
自定義事件
按鍵綁定
滾動條信息
銷毀
這篇文章講到了iscroll的一些使用入門、參數配置和示例，並講到了滾動條的介面，自定義事件和銷毀動作等。原文：iscroll.js的使用
入門
Scroll是一個類，每個需要使用滾動功能的區域均要進行初始化。每個頁面上的iScroll實例數目在設備的CPU和內存能承受的範圍內是沒有限制的。
儘可能保持DOM結構的簡潔。iScroll使用硬體合成層但是有一個限制硬體可以處理的元素。
最佳的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，你需要構建自己的循環機制。
初始化
當DOM準備完成後iScroll需要被初始化。最保險的方式是在w**indow的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
/body
**註：**如果你有一個複雜的DOM結構，最好在onload事件之後適當的延遲，再去初始化iScroll。最好給瀏覽器100或者200毫秒的間隙再去初始化iScroll。
參數配置
在iScroll初始化階段可以通過構造函數的第二個參數配置它。
var myScroll = new IScroll(‘#wrapper’, { mouseWheel: true, scrollbars: true});
上面的例子示例了在iScroll初始化時開啟滑鼠滾輪支持和滾動條支持。
理解核心
iScroll使用基於設備和瀏覽器性能的各種技術來進行滾動。通常不需要你來配置引擎，iScroll會為你選擇最佳的方式。
儘管如此，理解iScroll工作機制和了解如何去配置他們也是很重要的。
options.useTransform
默認情況下引擎會使用**CSStransform**屬性。如果現在還是2007年，那麼可以設置這個屬性為false，這就是說：引擎將使用top/left屬性來進行滾動。
這個屬性在滾動器感知到Flash，iframe或者視頻插件內容時會有用，但是需要注意：性能會有極大的損耗。
默認值：true
options.useTransition
iScroll使用**CSS transition**來實現動畫效果（動量和彈力）。如果設置為false，那麼將使用requestAnimationFrame代替。
在現在瀏覽器中這兩者之間的差異並不明顯。在老的設備上transitions執行得更好。默認值：true
options.HWCompositing
這個選項嘗試使用**translateZ(0)**來把滾動器附加到硬體層，以此來改變CSS屬性。在移動設備上這將提高性能，但在有些情況下,你可能想要禁用它(特別是如果你有太多的元素和硬體性能跟不上)。
默認值：true
*註：***如果不確定iScroll的最優配置。從性能角度出發，上面的所有選項應該設置為true。（或者更好的方式，讓他們自動設置屬性為true）。你可以嘗試這配置他們，但是要小心內存泄漏。
滾動條
滾動條不只是像名字所表達的意義一樣，在內部它們是作為indicators的引用。
一個指示器偵聽滾動條的位置並且現實它在全局中的位置，但是它可以做更多的事情。
先從最基本的開始。
options.scrollbars
正如我們在基本功能介紹中提到的，激活滾動條只需要做一件事情，這件事情就是：
var myScroll = new IScroll(‘#wrapper’, { scrollbars: true});
當然這個默認的行為是可以定製的。
滾動的編程介面
當然還可以通過編程來進行滾動。
scrollTo(x, y, time, easing)
對應存在的一個叫做myScroll的iScroll實例，可以通過下面的方式滾動到任意的位置：
myScroll.scrollTo(0, -100);
通過上面的方式將向下滾動100個像素。記住：0永遠是左上角。需要滾動你必須傳遞負數。
time 和 easing是可選項。他們控制滾動周期（毫秒級別）和動畫的擦除效果。
擦除功能是一個有效的IScroll.utils.ease對象。例如應用一個一秒的經典擦除動畫你應該這麼做：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
擦除動畫的類型選項有：quadratic, circular, back, bounce, elastic。
scrollBy(x, y, time, easing)
和上面一個方法類似，但是可以傳遞X和Y的值從當前位置進行滾動。
myScroll.scrollBy(0, -10);
上面這個語句將在當前位置向下滾動10個像素。如果你當前所在位置為-100，那麼滾動結束後位置為-110.
scrollToElement(el, time, offsetX, offsetY, easing)
這是一個很有用的方法，你會喜歡它的。
在這個方法中只有一個強制的參數就是el。傳遞一個元素或者一個選擇器，iScroll將嘗試滾動到這個元素的左上角位置。
time是可選項，用於設置動畫周期。
offsetX 和 offsetY定義像素級的偏移量，所以你可以滾動到元素並且加上特別的偏移量。但並不僅限於此。如果把這兩個參數設置為true，元素將會位於屏幕的中間。
easing參數和scrollTo方法里的一樣。
對齊
iScroll能對齊到固定的位置和元素。
options.snap
最簡單的對齊配置如下：
var myScroll = new IScroll(‘#wrapper’, { snap: true});
這將按照頁面容器的大小自動分割滾動條。
snap屬性也可以傳遞字元類型類型的值。這個值是滾動條將要對齊到的元素的選擇器。比如下面：
var myScroll = new IScroll(‘#wrapper’, { snap: ‘li’});
這個示例中滾動條將會對齊到每一個LI標記的元素。
下面將幫助你快速瀏覽iScroll提供的關於對齊的一系列有趣的方法。
goToPage(x, y, time, easing)
x 和 y呈現你想滾動到橫向軸或者縱向軸的頁面數。如果你需要在單個唯獨上使用滾動條，只需要為你不需要的軸向傳遞0值。
time屬性是動畫周期，easing屬性是滾動到指定點使用的擦除功能類型。請參考高級功能中的option.bounceEasing。這兩個屬性都是可選項。
myScroll.goToPage(10, 0, 1000);
上面這個例子將在一秒內沿著橫向滾動到第10頁。
next()
prev()
滾動到當前位置的下一頁或者前一頁。
縮放
為了使用縮放功能，你最好使用iscroll-zoom.js腳本。
和前面的示例一樣，一個好的縮放功能的配置如下：
myScroll = new IScroll(‘#wrapper’, { zoom: true, mouseWheel: true, wheelAction: ‘zoom’});
刷新
iScroll需要知道包裝器和滾動器確切的尺寸，在iScroll初始化的時候進行計算，如果元素大小發生了變化，需要告訴iScroll DOM發生了變化。
下面將提供調用refresh方法的正確時機。
每次觸摸DOM，瀏覽器渲染器重繪頁面。一旦發生了重畫我們可以安全地讀新的DOM屬性。重新繪製階段不是瞬時發生的只是範圍結束時觸發。這就是為什麼我們需要給渲染器刷新iScroll之前一點時間。
為了確保javascript得到更新後的屬性，應該像下面的例子這樣使用刷新方法：
ajax(‘page.php’, onCompletion);function onCompletion () { // Update here your DOM
setTimeout(function () {
myScroll.refresh();
}, 0);
};
這裡調用refresh()使用了零秒等待，如果你需要立即刷新iScroll邊界就是如此使用。當然還有其他方法可以等待頁面重繪，但零超時方式相當穩定。
**註：***如果你有一個相當複雜的HTML結構，你應該給瀏覽器更多的執行事件，可以設置100到200毫秒的超時時間。
這通常適用於所有任務必須在DOM上進行。通常給渲染器一些執行的時間。*
自定義事件
iScroll還提供額一些你可以掛靠的有用的自定義事件。
使用on(type, fn)方法註冊事件。
myScroll = new IScroll(‘#wrapper’);
myScroll.on(‘scrollEnd’, doSomething);
上面的代碼會在每次滾動停止是執行doSomething方法。
可以掛靠的事件如下：
beforeScrollStart，在用戶觸摸屏幕但還沒有開始滾動時觸發。
scrollCancel，滾動初始化完成，但沒有執行。
scrollStart，開始滾動
scroll，內容滾動時觸發，只有在scroll-probe.js版本中有效，請參考onScroll event。
scrollEnd，停止滾動時觸發。
flick，用戶打開左/右。
zoomStart，開始縮放。
zoomEnd，縮放結束。
按鍵綁定
你可以激活keyBindings選項來支持鍵盤控制。默認情況下iScroll監聽方向鍵，上下翻頁建，home/end鍵，但這些按鍵綁定完全可以自定義。
你可以通過傳遞一個包含按鍵代碼列表的對象來進行按鍵綁定。
默認的按鍵值如下:
keyBindings: {
pageUp: 33,
pageDown: 34, end: 35,
home: 36, left: 37,
up: 38, right: 39,
down: 40}
當然你也可以傳遞字元串進行按鍵綁定（例如：pageUp: ‘a’）。只要你設置了對於的按鍵值，那麼iScroll就會響應你的設置。
滾動條信息
iScroll存儲了很多有用的信息，您可以使用它們來增強您的應用。
你可能會發現有用的：
myScroll.x/y，當前位置
myScroll.directionX/Y，最後的方向 (-1 down/right, 0 still, 1 up/left)
myScroll.currentPage，當前對齊捕獲點
下面是關於處理時間的代碼示例：
myScroll = new IScroll(‘#wrapper’);
myScroll.on(‘scrollEnd’, function () { if ( this.x -1000 ) { // do something
}
});
如果 x 位置是低於-1000 像素滾輪停止時，上述執行某些代碼。請注意我用這個產品而不是 myScroll，您可以使用兩個當然，但 iScroll 傳遞本身作為這種情況下，當觸發自定義事件的功能。
銷毀
在不需要使用iScoll的時候調用iScroll實例的公共方法destroy()可以釋放一些內存。
myScroll.destroy();
myScroll = null;
circular什麼意思中文翻譯
circular
英 [ˈsɜ:kjələ(r)] 美 [ˈsɜ:rkjələ(r)]
adj.
圓形的; 環行的; 迂迴的，繞行的; 供傳閱的，流通的
n.
通知，通告; 印製的廣告，傳單
複數： circulars 形近詞： torcular circulus circulin circulen
雙語例句
1
Place your hands on your shoulders and move your elbows up, back, and down, in a circular motion.
雙手置於肩上，肘部向上、向後、向下做圓圈運動。
2
Both sides of the river can be explored on this circular walk.
沿著這條環行線路走一圈，河的兩邊都可以看到。
原創文章，作者：BT4RP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/127604.html
微信掃一掃 
支付寶掃一掃 