This page has been robot translated, sorry for typos if any. Original content here.

JScrollPane. Machen Sie schönes Scrollen

Trotz der Tatsache, dass das Netzwerk mit Empfehlungen überhäuft wird, die übliche Art von Controllern für den Benutzer nicht zu ändern, ist es zunehmend notwendig, dem Wunsch des Kunden zu begegnen, eine ungewöhnliche, schöne und manchmal nur neu gestaltete Scrollbar auf ihrer Website zu sehen.

Zum Beispiel:

Aufgabe

Implementieren Sie eine vertikale Bildlaufleiste, die die folgenden Anforderungen erfüllt:

    * Einhaltung des Designs;
    * Browserübergreifende Kompatibilität;
    * Die Fähigkeit, das Mausrad zu scrollen.

Lösung

Wir werden das Rad nicht neu erfinden, da kluge Köpfe schon für uns gearbeitet haben. Wir verwenden das kostenlose jScrollPane-Plugin - es entspricht voll und ganz den aufgeführten Anforderungen.

Mit ihm können Sie eine solche Schriftrolle oder etwas ähnliches machen.

Eingecheckt:

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Zu wem es wenig gibt, können Sie andere Beispiele auf der offiziellen Seite des Plugins sehen.

Was herunterladen?

Schnellstart

Wir verbinden Bibliotheken und vergessen CSS nicht:

<code>&lt;link type=text/css rel=stylesheet href=css/jScrollPane.css /&gt;&lt;script type=text/javascript src=js/jquery-1.4.2.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jquery.mousewheel.min.js&gt;&lt;/script&gt;&lt;script type=text/javascript src=js/jScrollPane.js&gt;&lt;/script&gt;</code>

Im HTML-Container zum Scrollen erstellen:

<code>&lt;div class=scrollBox&gt;&lt;div id=pane class=scroll-pane&gt;Хочу себе необычный скролл! &lt;/div&gt;&lt;/div&gt;</code>

In CSS legen wir das Design des Containers fest:

<code>.scroll-pane { width: 700px; /* Ширина видимой области*/ height: 275px; /* Высота видимой области*/ overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }</code>

Passe Stile aus jScrollPane.css an und zeichne Bilder (mehr dazu unten).

Der letzte Schritt besteht darin, das Scroll-Skript zu initialisieren:

<code>&lt;script type=text/javascript&gt;jQuery(function() { jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

Und jetzt mehr über alles

Mehr über HTML

Im obigen Beispiel werden zwei Container erstellt: scroll-pane und scrollBox, und tatsächlich wird nur scroll-pane verwendet. Wozu dient der externe scrollBox-Container? Es ist nützlich, um den Bildlaufbereich zu positionieren, da es schwierig ist, den Bildlaufbereich selbst zu positionieren, da das Skript es auch in einen eigenen Container einfügt. Im Allgemeinen ist die Verwendung eines externen div (wir haben scrollBox) für die Positionierung der Rat von der offiziellen Website des Plugins.

Mehr zu CSS

Verspätete detaillierte Analyse von jScrollPane.css:

<code>.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } /* Трек - полоса по которой бегает ползунок */ .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scrollTrak.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ } /* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */ .jScrollPaneDrag { position: absolute; background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */ cursor: pointer; overflow: hidden; left:1px; } /* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */ .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота верхушки */ } /* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */ .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ height:3px; /* высота низа */ } /* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */ a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ } /* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/ a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */ background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */ }</code>

Lesen Sie mehr über js

Zwei Funktionen sind definiert:

jScrollPane Initialisiert den Bildlauf entsprechend den angegebenen Parametern (eine Liste finden Sie in der folgenden Tabelle).
jScrollPaneEntfernen "Deinitialisierung" - entfernt eine stilvolle Bildlauffunktion und stellt den Standard wieder her.

JScrollPane Parameter ()

Funktionsname Funktionsbeschreibung Datentyp
BildlaufleisteWeite benutzerdefinierte Bildlaufleistenbreite in Pixel Der Standardwert ist 10 int
scrollbarMargin Einzüge links von der Bildlaufleiste in Pixel. Der Standardwert ist 5 int
Radgeschwindigkeit gibt an, wie schnell das Mausrad den Inhalt in Pixel scrollen lässt. Der Standardwert ist 18 int
showArrows zeigt an, ob die Pfeile auf der Bildlaufleiste angezeigt werden. Standard ist falsch boolesch
Pfeilgröße Pfeilhöhe wenn showArrows = true (wenn nicht gesetzt, berechnet aus CSS) int
animateTo Brauchen Sie eine Animation, wenn Sie scrollTo und scrollBy aufrufen? Standard ist falsch boolesch
dragMinHeight die minimale Höhe, bei der Sie den Schieberegler ziehen können. Der Standardwert ist 0 int
animateInterval Das Intervall in Millisekunden zum Aktualisieren der scrollPane-Animation. Der Standardwert ist 100 int
animateStep Die Entfernung, die der Schieberegler in einem Schritt der Animation zurücklegt. Standardwert 3 int
Wartungsposition Wenn die Bildlaufleiste beim Neuinitialisieren ihre Position beibehalten soll, wird beim Hinzufügen weiterer Inhalte kein Bildlauf ausgeführt. Standard ist wahr boolesch
BildlaufleisteOnLeft Gibt an, dass die Bildlaufleiste links vom Inhalt angezeigt werden soll (stellen Sie sicher, dass der CSS diesen Punkt ebenfalls widerspiegelt) boolesch
reinitialiseOnImageLoad Soll das Skript beim Hochladen von Bildern in den Inhalt automatisch neu initialisiert werden? Standard ist falsch boolesch

Ein bisschen über die Dynamik

Falls sich die Breite (Höhe) eines Scrolls dynamisch ändert, müssen nacheinander die Funktionen jScrollPaneRemove und jScrollPane aufgerufen werden.

Angenommen, wir haben dieses CSS:

<code>.scrollBox{ width:200px; } .scroll-pane { width: 100%; height: 100px; overflow: auto; }</code>

Das Skript ändert die Breite der scrollBox und ändert damit automatisch die Breite des .scroll-Bereichs:

<code>&lt;script type=text/javascript&gt;jQuery('#more').click(function() { jQuery('.scrollBox').css('width','300px'); jQuery('#pane').jScrollPaneRemove(); jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); }); &lt;/script&gt;</code>

Demo-Beispiel

Verifiziert von

    * IE 6-8 * Firefox 3 * Opera 9.5-10 * Safari 3

Nuance mit scrollendem Mausrad

JScrollPane hat ein interessantes Feature. Wenn Sie das Scrollrad mit dem Mausrad drehen, beginnt der Scrollbalken der Hauptseite, nachdem der gesamte Inhalt des Containers gescrollt ist (natürlich, falls es einen gibt).

Gemessen am jScrollPane.js-Code wird dies absichtlich gemacht (was bedeutet, dass es sich nicht um einen Fehler, sondern um ein Feature handelt). Wenn diese Funktion jedoch stört, kann sie leicht ausgeschaltet werden.

Wir klettern in den jScrollPane.js Code und finden dort die Zeilen:

<code>$container.bind( 'mousewheel', function (event, delta) { ...тра-та-та многабукофф... return !dragOccured; } );</code>

Change return! DragOccured; falsch zurückgeben;

Jeder Jetzt verhält sich das Rad logischer und steuert nicht das Scrollen auf der Hauptseite, bis sich der Mauszeiger aus dem Container bewegt.

Scrollen zur gewünschten Position (Update 1.08.10)

Manchmal ist es erforderlich (oder für eine Aktion), einen Block mit einem solchen Bildlauf zu einer bestimmten Position zu scrollen. Dafür hat das Plugin zwei (aus irgendeinem Grund schlecht beschriebene) Funktionen:

scrollTo - Scrollt den Inhalt an die angegebene Position. Die Position kann in px angegeben werden (wir zählen vom oberen Rand dieses Blocks mit Scrollen) oder setzen Sie die ID - der Block scrollt zu dem Element mit der angegebenen ID

scrollBy - Scrollt den Block um die angegebene Anzahl von Pixeln relativ zur aktuellen Position

Funktionen klammern sich an den Block, an dem die Bildlauf-Initialisierung gehängt wurde.

<code>&lt;script type=text/javascript&gt;jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true}); jQuery('#pane')[0].scrollTo(500); &lt;/script&gt;</code>

Beachten Sie, dass "[0]" ein Muss ist. Warum ist es - ich weiß nicht (will lernen, den Code des Plugins zu graben), aber ohne dies funktioniert nicht.

Vorteile:

    * funktioniert in allen gängigen Browsern angemessen;
    * erlaubt Ihnen, das Aussehen und das Verhalten der Rolle flexibel anzupassen;
    * gescrolltes Mausrad.

Minus:

    * Horizontales Scrollen ist nicht implementiert.