在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 指示器
滾動條信息
滾動條
理解核心
基本功能
入門
自定義事件
無限滾動
初始化
掌握刷新方法
指示器
配置iScroll
銷毀
按鍵綁定
對齊
iScroll的版本
縮放
高級選項

指示器

上面所有關(guān)于滾動條的選項實際上是包裝了一個底層的選項indicators。它看起來或多或少像這樣:

var myScroll = new IScroll('#wrapper', {
    indicators: {
        el: [element|element selector]
        fade: false,
        ignoreBoundaries: false,
        interactive: false,
        listenX: true,
        listenY: true,
        resize: true,
        shrink: false,
        speedRatioX: 0,
        speedRatioY: 0,
    }
});

options.indicators.el

這是一個強制性的參數(shù),它保留了指向滾動條容器元素的引用。容器里的第一個子元素就是指示器。注意,滾動條可以在你的文檔的任意地方,它不需要在滾動條包裝器內(nèi)。你是不是開始感到這樣一個工具的厲害?

有效的語法如下:

indicators: {
    el: document.getElementById('indicator')
}

更簡單的方式:

indicators: {
    el: '#indicator'
}

options.indicators.ignoreBoundaries

這個屬性是告訴指示器忽略它容器所帶來的邊界。當(dāng)我們能改變滾動條速度的比率,在讓滾動條滾動時這個屬性很有用。比如你想讓指示器是滾動條速度的兩倍,指示器將很快到達它的結(jié)尾。這個屬性被用在視差滾動。

默認(rèn)值:false

options.indicators.listenX、options.indicators.listenY

指示器的那一個軸(橫向和縱向)被偵聽??梢栽O(shè)置一個或者都設(shè)置

默認(rèn)值:true

options.indicators.speedRatioX、options.indicators.speedRatioY

指示器移動的速度和主要滾動條大小的關(guān)系。默認(rèn)情況下是設(shè)置為自動。你很少需要去改變這個值。

默認(rèn)值:0

options.indicators.fade、options.indicators.interactive、options.indicators.resize、options.indicators.shrink

這幾個選項和我們已經(jīng)介紹過的滾動條中的一樣,在這里不重復(fù)介紹。

請參考迷你地圖示例,你將體驗indicators選項的神奇力量。

你應(yīng)該已經(jīng)注意到選項indicators是復(fù)數(shù),是的,實際上,傳遞一個對象數(shù)組你可以得到一個虛擬的無限大小的指示器。我不知道你是否需要,但是,這里我是想你介紹參數(shù)設(shè)置,所以要提及此。

視差滾動

視差滾動是指示器功能的一個 附屬功能

指示器是一個遵循主滾動條移動和動畫的層。如果你了解它你就會理解這個功能背后的力量。增加這個功能你就可以創(chuàng)建任意數(shù)量的指示器和視差滾動。

請參考 視差滾動示例.

滾動的編程接口

當(dāng)然還可以通過編程來進行滾動。

scrollTo(x, y, time, easing)

對應(yīng)存在的一個叫做myScroll的iScroll實例,可以通過下面的方式滾動到任意的位置:

myScroll.scrollTo(0, -100);

通過上面的方式將向下滾動100個像素。記?。?永遠是左上角。需要滾動你必須傳遞負(fù)數(shù)。

timeeasing是可選項。他們控制滾動周期(毫秒級別)和動畫的擦除效果。

擦除功能是一個有效的IScroll.utils.ease對象。例如應(yīng)用一個一秒的經(jīng)典擦除動畫你應(yīng)該這么做:

    myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

擦除動畫的類型選項有:quadratic, circular, back, bounce, elastic。

scrollBy(x, y, time, easing)

和上面一個方法類似,但是可以傳遞X和Y的值從當(dāng)前位置進行滾動。

myScroll.scrollBy(0, -10);

上面這個語句將在當(dāng)前位置向下滾動10個像素。如果你當(dāng)前所在位置為-100,那么滾動結(jié)束后位置為-110.

scrollToElement(el, time, offsetX, offsetY, easing)

這是一個很有用的方法,你會喜歡它的。

在這個方法中只有一個強制的參數(shù)就是el。傳遞一個元素或者一個選擇器,iScroll將嘗試滾動到這個元素的左上角位置。

time是可選項,用于設(shè)置動畫周期。

offsetXoffsetY定義像素級的偏移量,所以你可以滾動到元素并且加上特別的偏移量。但并不僅限于此。如果把這兩個參數(shù)設(shè)置為true,元素將會位于屏幕的中間。請參考例子 滾動到元素 example。

easing參數(shù)和scrollTo方法里的一樣。

上一篇:按鍵綁定下一篇:掌握刷新方法