Offizielle Website: http://iscrolljs.com/
Die einfachste DOM -Struktur von ISCroll:
<div id = "Wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Iscroll initialisieren
var myscroll = new iscroll ('#Wrapper', Optionen);Einstellungen initialisieren
Initialisieren Sie Einstellungsnutzungsbeispiel:
var myscroll = new iscroll ('#Wrapper', {Mausrad: true, Scrollbars: true});Einstellungsliste:
Gehört zu | Attributname | veranschaulichen | Standardwert |
|---|---|---|---|
Kernbibliothek Croe | Optionen.USETRANSFORM | Ob Sie die Transformationseigenschaft von CSS3 verwenden möchten | WAHR |
Optionen.Usetransition | Ob Sie die Übergangseigenschaft von CSS3 verwenden möchten, verwenden Sie stattdessen RequestAnimationFram | WAHR | |
Optionen.HwCompositing | Ob die Hardwarebeschleunigung aktiviert werden soll | WAHR | |
Optionen.Pounce | Ob Sie einen elastischen Animationseffekt ermöglichen, um sich zu beschleunigen | WAHR | |
Grundfunktionen Grundfunktionen | Optionen.Click | Ob das Klickereignis aktiviert werden soll. Es wird empfohlen, diese Option auszuschalten und benutzerdefinierte Tippen zu aktivieren (Optionen.Tap). | FALSCH |
Optionen.DisableMouse | Ob die Erkennung von Mausereignissen ausgeschaltet werden soll. Wenn Sie wissen, auf welcher Plattform Sie laufen sollen, können Sie es beschleunigen. | FALSCH | |
options.isablePointer | Ob die Erkennung von Zeigerereignissen ausgeschaltet werden soll. Wenn Sie wissen, auf welcher Plattform Sie laufen sollen, können Sie es beschleunigen. | FALSCH | |
Optionen.Disabletouch | Ob die Erkennung von Berührungsereignissen ausschalten soll. Wenn Sie wissen, auf welcher Plattform Sie laufen sollen, können Sie es beschleunigen. | FALSCH | |
options.eventPasshrough | Wenn Sie die horizontale Achse von ISCROLL zum Rollen verwenden, sollten Sie die vertikale System -Achse zum Rollen verwenden und auf die horizontale Achse wirken. Schalten Sie bitte ein. Ereignisdurchlauf -Demo | FALSCH | |
Optionen.Freescroll | Es wird hauptsächlich verwendet, wenn sowohl nach oben als auch die linke und rechte Scrollen wirksam werden, und kann in eine beliebige Richtung gescrollt werden. 2d Scroll Demo | FALSCH | |
Optionen.KeyBindings | Binden Sie ein Schlüsselereignis. Schlüsselbindungen | FALSCH | |
Optionen.InvertWheelDirection | Reverse Mausrad. | FALSCH | |
Optionen.Momentum | Unabhängig davon, ob Sie die Start -up -Animation einschalten, schalten Sie sie aus, um die Effizienz zu verbessern. | WAHR | |
Optionen.Mousewheel | Ob Sie Mausradveranstaltungen anhören. | FALSCH | |
Optionen.PreventDefault | Ob das Standard -Ereignis blockiert werden soll. | WAHR | |
Optionen.Scrollbars | Ob die Standard -Scrollbar anzeigen soll | FALSCH | |
Optionen.Scrollx Optionen.Scrolly | Sie können festlegen, ob horizontale oder vertikale Bildlaufleisten angezeigt werden sollen | Scrollx falsch wahrer wahr | |
Optionen.tap | Ob Sie benutzerdefinierte Tap -Ereignisse aktivieren möchten Sie können den Tap -Ereignisnamen anpassen | FALSCH | |
Bildlaufleiste Scrollbars | Optionen.Scrollbars | Ob die Standard -Scrollbar anzeigen soll | FALSCH |
Optionen.FadesCrollbars | Unabhängig davon, ob Sie die Scrollbar verblassen, schalten Sie sie aus, um zu beschleunigen | WAHR | |
Optionen.InteractiveCrollbars | Kann der Benutzer die Bildlaufleiste ziehen? | FALSCH | |
Optionen.ResizeCrollbars | Unabhängig davon, ob die Bildlaufleistengröße repariert wird, wird empfohlen, sie beim Anpassen der Bildlaufleiste zu aktivieren. | FALSCH | |
Optionen.ShrinkScrollbars | Ob die Scrollleiste beim Scrollen verkleinert werden soll, überschreitet die Scroll -Grenze. 'Clip': Ernte die Bildlaufleiste jenseits "Skala": Scaling Scalrollbar proportional (nimmt CPU -Ressourcen ein) Falsch: kein Schrumpfung, | FALSCH | |
Optionen.indikatoren | Weist an, wie iscroll scrolliert werden sollte, die zugrunde liegende Implementierung von Scrollbars. | ||
Optionen.indikatoren.el | Erstellen Sie einen Container für Scrollstangen. Das erste Element im Container ist der Indikator. Zum Beispiel: Anzeigen: { EL: document.getElementById ('Indikator') } Anzeigen: { El: '#indicator' ' } | ||
options.indicators.ignoreboundaries | Ob Sie Containergrenzen ignorieren. Setzen Parallelax -Demo | FALSCH | |
Optionen.indicators.Listenx Optionen.indicators.Listeny | Der Indikator überwacht das Bildlauf dieser Richtung, die in eine Richtung oder zwei Richtungen eingestellt werden kann. | WAHR | |
options.indicators.speedratiox options.indicators.speedratioy | Indikatorgeschwindigkeit relativ zur Hauptscroll -Stange | 0 | |
options.indicators.fade Optionen.indicators.interactive Optionen.indikatoren.Resize options.indicators.shrink | Einstellungen wie Scrollbars Minimap -Demo | ||
Optionen.Probetype | Iscroll-probe.js muss wirksam werden Probetype: 1 ausgelöst, wenn das Scrollen nicht beschäftigt ist probetype: 2 jedes Mal beim Scrollen ausgelöst Probetyp: 3 einmal pro Pixel -Schriftrolle ausgelöst | ||
SPAP SNAP | Optionen.Snap | Teilen Sie Container automatisch, um die wirkenden Laternen usw. zu beeinflussen. Options.snap: true // automatisch gemäß Containergröße aufgeteilt Options.snap: el // Segment gemäß Element | FALSCH |
Zoom Zoom | Optionen.zoom | Ob Sie Zoom einschalten sollten Es ist am besten, iscroll-zoom.js zu verwenden Wenn die Vergrößerung verschwommen ist, kann der Quellbehälter als das 2 -fache der Größe definiert werden und dann skalieren (0,5) Zoom -Demo | FALSCH |
Optionen.Zoommax | Maximale Zoomebene | 4 | |
Optionen.Zoommin | Minimaler Zoomebene | 1 | |
Optionen.Startzoom | Erstes Skalierungsniveau | 1 | |
Optionen.Wheelaction | Rollenaktion Wenn Sie auf "Zoom" einstellen, können Sie mit dem Bildlaufrad zoomen | undefiniert | |
Weitere Einstellungen | Optionen.BindTowRapper | Unabhängig davon, ob der Cursor oder die Berührung den Behälter überschreitet | FALSCH |
Optionen.BounceaSing | Elastischer Animationseffekt Voreingestellte Effekte: "quadratisch", "kreisförmig", "zurück", "bounce", "elastic" (die letzten beiden können nicht durch CSS3 ausgedrückt werden) Sie können auch die Effekte anpassen Bounceasing: { Stil: 'Cubic-Bezier (0,0,1,1)', // CSS3 fn: function (k) {return k; } // Bei Verwendung von RequestAnimationFrame, } | 'kreisförmig' | |
Optionen.bouncetime | Die Anzahl der Millisekunden elastischer Animation dauert | 600 | |
Optionen.Dekelation | Dämmerung der Schwung Je größer, desto schneller ist der empfohlene Preis nicht mehr als 0,01 | 0,0006 | |
Optionen.Mousewheelspeed | Mausradgeschwindigkeit | ||
Optionen.PreventDefaultException | Listen, welche Elemente keine Standardereignisse blockieren; | {tagname: /^(Eingabe | textarea | Schaltfläche | Auswählen) $ /} | |
Optionen.Resizepolling | Berechnen Sie das iScroll -Zeitintervall bei der Größe des Fensters neu | 60 | |
Schlüsselbindung | Optionen.KeyBindings | Hören Sie sich wichtige Ereignisse an, um ISCroll zu kontrollieren Zum Beispiel: Schlüsselbindungen: {{ Pageup: 33, PAGEDOWN: 34, Ende: 35, Home: 36, links: 37, up: 38, Recht: 39, Down: 40 } | |
ISCROLL5 API:
Gehört zu | Methodenname | veranschaulichen |
|---|---|---|
scrollen | Scrollto (x, y, Zeit, Lockerung) | Scrollen Sie zu: X, Y, Ereignis, Lockerungsmethode X: int Y: int Zeit: int Lockerung: quadratisch | Rundschreiben | zurück | Sprungbrett | elastisch Siehe das Objekt von iscroll.utils.ease Beispiel: myScroll.scrollto (0, -100, 1000, iscroll.utils.ease.elastic); |
Scrollby (x, y, Zeit, Lockerung) | Scrollen Sie in relativ zur aktuellen Position zu einem Ort Der Rest ist der gleiche wie oben | |
scrolltoelement (El, Zeit, Offsetx, Offsety, Lockern) | Scrollen Sie zu einem Element. El ist der erforderliche Parameter OffsetX/Offsety: Verschiebung relativ zum EL -Element. Auf treu eingestellt, um die Mitte des Bildschirms zu sein Scrollen Sie zu Element | |
SPAP SNAP | Gotopage (x, y, Zeit, Lockerung) | Teilen Sie die Seite nach Optionen auf. Snap und springen Sie zu einer Seite in Landschaft oder Porträt. XY kann gleichzeitig wirksam werden. Verwenden Sie in Kombination mit Optionen.snap |
nächste() prev () | Vorherige Seite, nächste Seite Verwenden Sie in Kombination mit Optionen.snap | |
Zoom | Zoom (Skala, x, y, Zeit) | Skalierungsbehälter Skala: Skalierungsfaktor |
Aktualisieren | erfrischt () | Aktualisieren iscroll |
zerstören | zerstören() | Zerstören Sie Iscroll und sparen Sie Ressourcen |
ISCROLL -Ereignisse:
Beforescrollstart | Der Benutzer klickt auf den Bildschirm, wurde jedoch noch nicht vor dem Scrollen initialisiert |
|---|---|
Scrollcancel | Stornieren Sie nach Initialisierung des Scrollens |
Scrollstart | Beginnen Sie scrollen |
scrollen | Scrollen |
Scrollend | Scroll endet |
Flick | Tippen Sie auf den linken und rechten Bildschirm |
Zoomstart | Starten Sie skalieren |
Zoomend | Ende des Zooms |
Beispiel für Ereignisnutzung:
myScroll = new iscroll ('#Wrapper'); myscroll.on ('scrollend', dosomething);Eigenschaften von iscroll:
myscroll.x/y | Aktueller Standort |
|---|---|
Myscroll.DirectionX/Y | Die Scroll-Richtung des letzten Mal |
MyScroll.CurrentPage | Aktuelle Snap -Informationen |
myScroll.maxScrollxMysCroll.maxScRolly | myScroll.x/y beim Scrollen nach unten |