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 überflutet ist mit Empfehlungen, den gewohnten Typ von Controllern nicht zu ändern, ist es zunehmend notwendig, dem Wunsch des Kunden zu begegnen, auf seiner Website eine ungewöhnliche, schöne und manchmal einfach neu gemalte Scrollbar zu sehen.

Zum Beispiel:

Ziel

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

    * Übereinstimmung mit dem Design;
    * Cross-Browser-Kompatibilität;
    * Die Fähigkeit, mit dem Mausrad zu blättern.

Die Lösung

Wir werden das Rad nicht neu erfinden, die guten Leute haben schon für uns gearbeitet. Wir verwenden das kostenlose Plug-in jScrollPane - es erfüllt die aufgeführten Anforderungen in vollem Umfang.

Mit seiner Hilfe können Sie so eine Schriftrolle oder dies tun .

Eingecheckt:

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

Wem es nicht genug ist, ist es möglich, andere Beispiele auf einer offiziellen Seite eines Plugins zu sehen.

Was zu rocken?

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>

Erstellen Sie einen HTML-Container für den Bildlauf:

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

In CSS richten wir das Container-Design ein:

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

Passen Sie die Stile von jScrollPane.css an und zeichnen Sie Bilder (mehr dazu unten).

Der letzte Schritt besteht darin, das Skript mit dem 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 über alles im Detail

Erfahren Sie mehr über HTML

Im obigen Beispiel werden zwei Container erstellt: Bildlauffenster und Bildlauffeld, und nur Bildlauffeld wird tatsächlich verwendet. Warum brauche ich ein externes Bildlauffeld? Es ist nützlich, um den Scrollbereich zu positionieren, da es ziemlich schwierig ist, den Scrollbereich selbst zu positionieren, da das Skript ihn mit einem eigenen Container umschließt. Im Allgemeinen ist die Verwendung einer externen Diva (wir haben eine scrollBox) zur Positionierung ein Tipp von der offiziellen Seite des Plugins.

Erfahren Sie mehr über CSS

Eine 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>

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 den eleganten Bildlauf und stellt den Standard wieder her.

JScrollPane ()

Funktionsname Beschreibung der Funktion Datentyp
BildlaufleisteWeite die Breite der benutzerdefinierten Bildlaufleiste in Pixel. Der Standardwert ist 10 int
scrollbarMargin Zieht links von der Bildlaufleiste in Pixel ein. Standardwert ist 5 int
Radgeschwindigkeit Gibt an, wie schnell das Mausrad den Inhalt in Pixel rollen lässt. Der Standardwert ist 18 int
showArrows Gibt an, ob die Pfeile auf der Bildlaufleiste angezeigt werden sollen. Der Standardwert ist false. boolesch
Pfeilgröße Höhespfeile wenn showArrows = true (wenn nicht angegeben, berechnet aus CSS) int
animateTo Ob Animation bei einem Aufruf erforderlich ist scrollTo und scrollBy. Der Standardwert ist false. 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. Der Standardwert ist 3 int
Wartungsposition Wenn Sie möchten, dass die Bildlaufleiste bei der Neuinitialisierung ihre Position beibehält, wird sie beim Hinzufügen weiterer Inhalte nicht gescrollt. Der Standardwert ist wahr boolesch
BildlaufleisteOnLeft Gibt an, dass die Bildlaufleiste links neben dem Inhalt angezeigt werden soll (stellen Sie sicher, dass CSS diesen Punkt ebenfalls widerspiegelt) boolesch
reinitialiseOnImageLoad Sollte das Skript automatisch neu initialisiert werden, wenn Bilder in den Inhalt geladen werden. Der Standardwert ist false. boolesch

Ein wenig über die Dynamik

Falls sich die Breite (Höhe) des Scrolls dynamisch ändert, müssen die Funktionen jScrollPaneRemove und jScrollPane nacheinander 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

Überprüft

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

Nuance mit einem Scroll-Mausrad

JScrollPane hat ein interessantes Feature. Wenn Sie mit dem Mausrad blättern, beginnt der Hauptseitenwechsler, nachdem der gesamte Inhalt des Containers gescrollt wurde, zu drehen (falls verfügbar).

Gemessen am Code jScrollPane.js wird dies speziell gemacht (was bedeutet, dass es kein Bug ist, sondern ein Feature). Wenn diese Funktion jedoch nicht funktioniert, können Sie sie problemlos deaktivieren.

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

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

Ändern Sie die Rückkehr! DragOccured; bei Rückgabe falsch;

Das ist alles! Jetzt verhält sich das Rad logischer und steuert nicht das Hauptscrollen der Seite, bis der Mauszeiger den Container verlässt.

Scrollen zur gewünschten Position (Update 1.08.10)

Manchmal ist es erforderlich (oder für irgendeine Aktion), den Block mit einem solchen Scrollen 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 (beginnend mit dem oberen Rand dieses Blocks mit Scrolling) oder Set-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

Die Funktionen bleiben an dem Block hängen, auf dem das Scrollen initialisiert wurde.

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

Ich möchte Sie darauf aufmerksam machen, dass "[0]" zwingend erforderlich ist. Warum ist es - ich weiß nicht (will lernen, den Code des Plug-Ins zu graben), aber ohne es nicht funktioniert.

Vorteile:

    * funktioniert gut in allen gängigen Browsern;
    * ermöglicht es Ihnen, die Darstellung und das Verhalten des Scrolls flexibel zu konfigurieren;
    * Scrolle mit dem Mausrad.

Weniger:

    * Horizontales Scrollen ist nicht implementiert.