Zusammenfassung
Diese Version von ISCroll 4 schreibt den ursprünglichen Code des ISCROLL -Frameworks vollständig um. Dieses Projekt wurde ausschließlich aufgrund der weit verbreiteten Verwendung mobiler Webkit -Browser (wie iPhone, iPad, Android) erstellt.
Eine lokalisierte Möglichkeit, den Inhalt eines Elements zu schieben, das Größe und Breite definiert. In diesem Fall können in diesem Fall alle Seiten von Webanwendungen keinen Header, ein Ende der Seite oder einen scrollbaren Inhalt mit Position enthalten: Absolut.
Mittelbereich.
Die neueste Überarbeitung des Android-Systems kann diese Funktion bereits unterstützen (obwohl die Unterstützung nicht besonders gut ist), und Apple scheint nicht bereit zu sein, das Ereignis mit einem Finger auf das DIV-Element anzuwenden.
Zusätzlich zu den Funktionen früherer Versionen von ISCroll enthält ISCROLL 4 auch die folgenden Funktionen:
(1) Zoom (Prise/Zoom)
(2) Ziehen Sie nach oben/nach unten, um zu aktualisieren
(3) Geschwindigkeits- und Leistungsverbesserung
(4) Elemente genau erfassen
(5) Benutzerdefinierte Scrollbar
Freundliche Tipps: IsCroll 4 ist keine einfache Alternative zu ISCROLL 3, und die API -Dokumentation ist bereits unterschiedlich. In Anbetracht der Tatsache, dass sich diese Version in der Beta befindet, haben einige APIs möglicherweise geringfügige Änderungen.
Benutzerhandbuch
In diesem Dokument finden Sie viele Beispiele, um Ihnen beizubringen, wie Sie schnell mit der IsCroll -Skriptbibliothek beginnen können. Es mag ein bisschen langweilig sein, sich auf das Demo -Beispiel im Artikel zu beziehen und dieses Dokument sorgfältig zu lesen, aber dieser Artikel ist die Essenz der Skriptbibliothek isCroll.
ISCroll muss die zu scrollierten Elemente initialisieren und die Anzahl der Elemente mit ISCroll in einer Seite nicht einschränken (Ihre Hardwarekonfiguration wird hier nicht berücksichtigt). Der Typ und die Länge des Inhalts im Scrollelement wirken sich in gewissem Maße auf die ISCroll -Skriptbibliothek aus
Die Anzahl der Elemente, die gleichzeitig verwendet werden können.
Bei der Verwendung von ISCroll -Skriptbibliothek sollte die Struktur des DOM -Baums einfach genug sein, um unnötige Tags zu entfernen und zu versuchen, übermäßige Verschachteln von Tags zu vermeiden.
Die optimale Struktur der Verwendung von ISCroll ist wie folgt:
<div id = "Wrapper"> <ul> <li> </li> ...... </ul> </div>
In diesem kleinen Beispiel wird das UL -Tag gescrollt. IsCroll muss mit dem Wrapper außerhalb des Bildlaufinhalts verbunden sein, um Ergebnisse zu erzielen.
【Vorsichtsmaßnahmen】:
Nur das erste untergeordnete Element im Wrapper kann gescrollt werden. Wenn Sie mehr Elemente scrollen möchten, können Sie die folgende Schreibmethode ausprobieren:
<div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
In diesem Beispiel kann das Scroller -Element auch dann gescrollt werden, wenn es zwei UL -Elemente enthält
ISCroll muss vor dem Anruf instanziiert werden. Sie können IsCroll in den folgenden Fällen instanziieren:
(1) Verwenden Sie das Ereignis von OndomeContented, um Scrollen zu erreichen
Geeignet zum Scrollen von Inhalten enthält nur Text und Bilder, und alle Bilder haben feste Größen
<script src = "iscroll.js"> </script> <script> var myscroll; function geladen () {myscroll = new isCroll ("Wrapper"); } window.adDeVentListener ("DomContentLoded", geladen, falsch); </script>Hinweis: Myscroll Variable ist global, sodass Sie es überall anrufen können
(2) Verwenden Sie das Onload -Ereignis, um Scrollen zu erreichen
Da das Domcontent -Ereignis nach dem Laden der DOM -Struktur aufgerufen wird, kann die Länge und Breite des Bildlaufbereichs möglicherweise nicht ermittelt werden, bevor Elemente wie Bilder nicht geladen werden. Zu diesem Zeitpunkt kann das Onload -Ereignis implementiert werden.
<script src = "iscroll.js"> <script> <Script> var myscroll; function geladen () {setTimeout (function () {myscroll = new isCroll ("Wrapper");}, 100); } window.adDeVentListener ("laden", geladen, falsch); </script>In diesem Fall wird ISCROLL initialisiert, nachdem die Seitenressourcen (einschließlich Bilder) 100 ms geladen wurden. Dies sollte eine relativ sichere Möglichkeit sein, IsCroll zu nennen.
(3) Initialisierung der Inline
Diese Situation wird aufgerufen, wenn die Seite in JS geladen wird. Diese Methode wird nicht empfohlen, aber viele JavaScript -Bigwigs verwenden diese Methode. Welchen Grund muss ich nicht zustimmen?
<script src = "iscroll.js"> </script> <div id = "Wraper"> <ul> <li> </li> ... </ul> </div> <script> var myscroll = new iscroll ("Wraper"); </script>Es wird jedoch empfohlen, dass Sie einige Framework Ready -Methoden verwenden, um IsCroll (wie Ready () in JQuery) sicher aufzurufen.
Parameter in iscroll übergeben
Mit dem zweiten Parameter in ISCroll können Sie einige Inhalte anpassen, z. B. den folgenden Code:
<Script> var myscroll = new isCroll ("Wraper", {hscrollBar: false, vscrollBar: false}); </script>Der zweite Parameter ist normalerweise ein Objekt. Beispielsweise wird die Bildlaufleiste im obigen Beispiel nicht angezeigt. Häufig verwendete Parameter sind wie folgt:
Hscroll False verbietet das horizontale Scrollen wahre horizontale Scrolling Standard für true
vscroll false raffined vertikal scroll true vertikal scroll standard zu true
Hscrollbar False Hides Scrollbars in horizontaler Richtung
vscrollbar false ausblenden Scrollbar in vertikaler Richtung
FixedScrollBar auf dem iOS -System, wenn das Ziehen von Elementen die Grenze des Scrollers überschreitet, schrumpft die Bildlaufleiste. Eingestellt auf treu, um zu verhindern, dass die Bildlaufleiste den Scroller überschreitet.
Der sichtbare Bereich des Scroller. Standard ist für Android und false auf iOS zutreffend
Fadescrollbar False gibt an, Scrollbars zu verbergen, wenn es keinen Verblasseneffekt gibt
HidescrollBar verbirgt die Scrollbar, wenn keine Benutzerinteraktion standardmäßig für true vorliegt
Bounce aktivieren oder deaktivieren
Impuls ermöglicht oder deaktiviert Trägheit, standardmäßig ist dieser Parameter sehr nützlich, wenn Sie Ressourcen speichern möchten.
LockDirection Falsche Stornieren der Dragrichtung, echter Widerstand kann nur in einer Richtung sein (nach oben/unten oder nach rechts/rechts)
Erreichung verschiedener Effekte
Scroll -Aktualisieren "Ziehen Sie zum Aktualisieren" Demo
Dieser Effekt ist seit Twitter sehr beliebt geworden und einige Apple Local Apps erschienen. Sie können hier einen Blick darauf werfen.
In der neuesten Version trennt der Autor den Teil "Pull to Refresh" als zusätzliches Plug-In für ISCroll. Sie können hier klicken, um zu sehen, wie Pull zum Aktualisieren funktioniert. Alles, was Sie tun müssen, ist die Methode PulldownAction () anzupassen. Möglicherweise benötigen Sie AJAX, um neue Inhalte zu laden. Denken Sie jedoch daran, Aktualisierung aufzurufen, sobald sich der DOM -Baum ändert. Es sollte erinnert werden, dass wir im Beispiel eine 1 -Sekunde -Verzögerung hinzugefügt haben, um den Verzögerungseffekt des Netzwerks zu simulieren. Wenn Sie diese Verzögerung nicht verwenden möchten, entfernen Sie natürlich die SetTimeout -Methode.
Zoom (Prise / Zoom) 'ziehen, um die Demo zu aktualisieren, um zu aktualisieren
Wir müssen uns der Tatsache stellen, dass nur das Rollen eigentlich nichts Neues ist. Deshalb erlauben wir in dieser Version von Iscroll 4 es Ihnen, es zu setzen
Groß und schrumpfen. Um diese Funktion zu wünschen, müssen Sie den Zoom -Parameter nur auf True einstellen, um Gesten zu verwenden, um ein- und auszuzoomen. Sie können hier einen Blick darauf werfen.
Das Doppelklick zum Zoomen und Aus- und Ausfahren wird auch in IsCroll 4 unterstützt. Um die Zoomfunktion zu verwenden, benötigen Sie mindestens die folgende Konfiguration:
var myscroll = new iscroll ("Wrapper", {zoom: true});
Wenn Sie die Zoomfunktion eingehend anpassen möchten, können Sie einige der folgenden Optionen verwenden:
Zoommax gibt das maximale Multiple an, das eine Vergrößerung ermöglicht. Die Standardeinstellung beträgt 4
[Hinweise]: Wenn die Bildskalierung effektiv ist, sollten Sie sie in die Hardware -Syntheseschicht einfügen. In Layman's Begriffen ist es, -Webkit -Transformation: Translate3D (0,0,0) für alle IMG -Elemente zu verwenden, die skaliert werden müssen. Und es ist besonders wichtig, dass die Hardwarebeschleunigung viele Ressourcen in Anspruch nimmt und mit Vorsicht verwendet werden sollte, da Ihre Anwendung abgestürzt wird.
SNAP UND STRIP TO REPLECT 'CAROUSEL' Demo
Die SNAP -Funktion besteht darin, zu bestimmen, ob das Element in die angegebene Position gleitet. Mit diesem Effekt können Sie einen ausgefallenen Festzelteffekt erzeugen.
Das Plug-In analysiert automatisch Elemente derselben Beschriftung oder derselben Größe im Scrolling-Bereich wie das Erfassungsobjekt und Sie können das erfasste Objekt auch über Parameter angeben.
var myscroll = new iscroll ("wrapper", {snap: true, trup: false, hscrollBar: false, vscrollBar: false});Sie können das SNAP -Objekt festlegen, indem Sie den SNAP -Parameter auf das angegebene Tag einstellen. Erfassen Sie beispielsweise das Li -Tag.
var myscroll = new iscroll ("Wrapper", {snap: "li", dynamik: false, hscrollBar: false, vscrollBar: false});In diesem Beispiel kann der Scroller das obere linksleitende Li-Element im Scrolling-Bereich erfassen
Benutzerdefinierte Scrollbars
In ISCROLL 4 kann eine Reihe von CSS verwendet werden, um das Rendering von Scrollbars anzupassen. Sie können der Bildlaufleiste wie folgt einen Klassenparameter hinzufügen:
var myscroll = new iscroll ("wrapper", {scrollBarClass: "myscrollBar"});Es ist zu beachten, dass die Bildlaufleiste aus zwei Elementen besteht: dem Container und der Anzeige. Der Behälter ist die gleiche Höhe wie die Wrapper, während das Display die Bildlaufleiste selbst darstellt.
Die HTML -Struktur der Bildlaufleiste lautet wie folgt:
<div> <div> </div> </div> .myScrollBarv {Position: absolut; Z-Index: 100; Breite: 8px; unten: 7px; ober: 2px; rechts: 1px; } .myscrollBarv> div {Position: absolut; Z-Index: 100; Breite: 100%; / * Folgendes ist wahrscheinlich das, was Sie anpassen möchten #800; -Webkit-Background-Clip: Padding-Box; -Webkit-Box-Größe: Border-Box; -Webkit-Border-Radius: 4px; -Webkit-Box-Shadow: Inset 1PX 1PX 0 RGBA (255,255,255,0,5); }Allgemeine Methode:
(1) Aktualisieren Sie diese Methode sollten aufgerufen werden, wenn sich der DOM -Baum ändert
zB: setTimeout (function () {myscroll.refresh ();}, 0);
.
Scrollto (x, y, Zeit, Relativ): Lassen Sie die Inhalts -Scrollbar X/Y -Position innerhalb der angegebenen Zeit. Zum Beispiel myScroll.scrollto (0, -100, 200) scrollt mit 100 Pixel in 200 Millisekunden nach unten. MyScroll.Scrollto (0, 10, 200, True) kann den Effekt der Scrollen von 10 Pixel auf die y-Achse innerhalb von 200 Millisekunden im Vergleich zur aktuellen Position erreichen.
Scrolltoelement (Element, Zeit): Scrollen Sie zum angegebenen Element innerhalb der angegebenen Zeit. Zum Beispiel myScroll.scrolltoelement ('li: n-Kind (10)', 100) scrollt in die Position des 10. Li-Elements innerhalb von 100 Millisekunden. Der erste Parameter kann verwendet werden, um Elemente mit dem Selektor in CSS3 zu filtern.
snaptopage (pagex, pagey, Zeit): Scrollen Sie von Seite 1 bis Seite 2 in 200 Millisekunden (0 repräsentiert Seite 1, 1, repräsentiert Seite 2). Diese Funktion kann aufgerufen werden, wenn die SNAP -Funktion verwendet wird.
(3) detroy () eliminiert myScroll und seinen Speicherraum besetzt
zB: myscroll.destroy ();
myscroll = null;
Die Entwicklungsrichtung von Iscroll
Domänenunterstützung formen
Skalierungsoptimierung
Bessere Desktop -Browserkompatibilität
Optimierung des ONSCROL -Ereignisses
Änderungen beim Hinzufügen eines Hash -Wertes
Automatische Aktualisierung nach DOM -Änderungen