So verwenden Sie das mobile Plug-in IScroll.js

Wir wissen, dass das IScroll.js-Plugin mit allen mobilen Bildlaufleistenereignissen kompatibel ist. Auf einigen Android-Geräten können wir die Bildlaufleiste nicht über overflo:scroll; Element Um das Scrollen zu handhaben, gebe ich Ihnen eine detaillierte Einführung in IScroll.js.

Hinweis

Bei Verwendung von IScroll.js müssen Sie über drei Ebenen der Elementverschachtelung verfügen, wie zum Beispiel:

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

Der äußerste Food-Left muss zwei CSS-Stile haben : Position:relativ; und Überlauf:versteckt.

Initialisierung

IScroll.js stellt uns einen IScroll-Konstruktor zur Verfügung ;
Wie folgt initialisieren wir das

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

-Konstrukt Die tatsächlichen Parameter Die in der Funktion übergebenen Parameter stimmen mit dem neuen querySelector-Parameter in ES6 überein. Tatsächlich wird querySelector auf die gleiche Weise wie unser jQuery-Selektor verwendet. Hinweis: Wir müssen ihn initialisieren, nachdem die DOM-Struktur geladen wurde, sonst wird er ungültig.

Einstellungen

IScroll.js ermöglicht es uns, den zweiten Parameter zu übergeben, um die Eigenschaften des Scroll-Ereignisses zu konfigurieren;

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

Scroll-Leiste

scrollbars: true

Ob Bildlaufleisten angezeigt werden sollen. Der Standardwert ist false;

fadeScrollbars:true

Die Bildlaufleiste wird ein- und ausgeblendet, vorausgesetzt natürlich, dass Ihre Bildlaufleiste angezeigt wird. Der Standardwert ist false;

interactiveScrollbars

Ob die Bildlaufleiste gezogen werden soll. Der Standardwert ist „false“;

resizeScrollbars

Die Länge der Bildlaufleiste wird proportional eingestellt. Wenn Sie eine feste Größe wünschen, können Sie sie auf „true“ festlegen 🎜>

Gibt an, ob eine Rebound-Animation ausgeführt werden soll, wenn der Bildlauf die Containergrenze erreicht. Der Standardwert ist „true“;

bounce: false

Ob das aktivierte Scrollen mit der Maus angezeigt werden soll; der Standardwert ist „false“; ob das Rückwärtsscrollen nach der Aktivierung des Mausscrollens aktiviert werden soll ; die Standardeinstellung ist false;

mouseWheel:true

iScroll deaktiviert das Standard-Mausklickverhalten. Wenn Sie die Einstellung true verwenden möchten;

invertWheelDirection

IScroll hört standardmäßig auf alle Zeiger. Wenn Sie die Plattform bestätigen, auf der sich das Projekt befindet, können Sie nicht verwendete Effekte deaktivieren, um den Ressourcenverbrauch zu reduzieren.

click:true

Eingestellt die anfängliche Versatzposition der Bildlaufleiste; der Standardwert ist keine;

disableMouse、disablePointer、options.disableTouch

Methoden

IScroll.js stellt uns auch einige praktische Methoden zur Verfügung, natürlich befinden sie sich alle unter dem Instanzobjekt ;

startX、startY

Scrollen Sie zum eingehenden Element. Die Position muss ein natives

DOM-Objekt sein

, dann kann die Scrollzeit

sein zu einer beliebigen Position. Die Standardposition ist 0. Wenn Sie verschieben möchten, müssen Sie eine negative Zahl festlegen.

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

Ich glaube, Sie haben die Methoden beherrscht, nachdem Sie diese Fälle gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!
Verwandte Lektüre:

scrollTo(x, y, time, easing)

So verwenden Sie xml2js in nodej

Detaillierte Erläuterung des Pfadmoduls von node.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das mobile Plug-in IScroll.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!