JScrollPane. Machen Sie einen schönen Scrollen

Trotz der Tatsache, dass das Web voll von Empfehlungen ist nicht die gewöhnlichen Benutzer ändern Controller anzuzeigen, müssen zunehmend mit Wunsch des Kunden befassen sich auf der Seite ungewöhnlich, schön zu sehen, und manchmal nur Scrollbar neu gestrichen.

Beispielsweise wie folgt:

Aufgabe

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

    * Die Einhaltung der Design;
    * Cross-Browser-Kompatibilität;
    * Die Möglichkeit, das Mausrad scrollen.

Entscheidung

Wir werden nicht das Rad neu erfinden, der Nutzen der kluge Leute haben für uns gearbeitet. kostenlos JScrollPane Plugin verwenden - es vollständig erfüllt diese Anforderungen.

Mit ihm können Sie tun , hier ist ein Scroll oder hier so.

getestet:

    * IE 6-8 * Firefox 3 * Opera 9,5-10 * Safari 3

Dieses kleine, können Sie sehen , andere Beispiele auf der offiziellen Plugin - Seite.

Was für Rock?

Schnellstart

Schließen Sie die Bibliothek und vergessen Sie nicht über CSS:

<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 eine HTML-Container für die Scroll-:

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

In CSS, ein Container-Design:

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

Anpassbare Arten von jScrollPane.css und zeichnen Bilder (mehr dazu weiter unten).

Der letzte Schritt - initialisieren das Scrollen Skript:

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

Jetzt sind alle Details

Mehr über HTML

Im Beispiel wird über zwei Container: Scroll-Scheibe und scrollbox, und eigentlich nur Scroll-Scheibe verwendet. Was benötigt wird, ist ein äußerer Behälter scrollbox? Es ist nützlich für einen rollbaren Bereich zu positionieren, sich als Scroll-Scheibe zu positionieren ziemlich schwierig, da das Skript wickeln Sie es wird und noch einen eigenen Container. Im Allgemeinen ist eine externe Diven (wir scrollbox) in Position - das ist der Rat der offiziellen Plugin-Website.

Mehr über CSS

Das Versprechen einer detaillierten Analyse 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

Definierte zwei Funktionen:

JScrollPane entsprechend initialisiert, das Buch zu den eingestellten Parametern (siehe Liste. in der Tabelle unten).
jScrollPaneRemove "Deinitialisierung" - eine elegante Scroll entfernt und stellt die Norm.

Prarametry JScrollPane ()

Funktionsnamen Funktion Beschreibung Datentyp
scrollbarWidth Scrollbar Nicht-Standard-Breite in Pixel. Der Standardwert ist 10 int
scrollbarMargin Einbuchtung auf der linken Seite der Bildlaufleiste in Pixel. Der Standardwert ist 5 int
wheel Es zeigt an, wie schnell das Mausrad Inhalt in Pixel machen zu blättern. Der Standardwert ist 18 int
showArrows Gibt an, ob der Pfeil auf der Bildlaufleiste angezeigt werden soll. Der Standardwert ist false boolean
arrowSize die Höhe des Schützen, wenn showArrows = true (wenn nicht anders angegeben, wird von der CSS berechnet) int
animateTo ob die Animation benötigt wird, wenn scrollTo und scrollBy aufrufen. Der Standardwert ist false boolean
dragMinHeight die Mindesthöhe bei dem Sie den Regler nach oben ziehen. Der Standardwert 0 int
animateInterval Intervall in Millisekunden die Animation scrollPane zu aktualisieren. Der Standardwert ist 100 int
animateStep Die Entfernung vom Schieber einen Schritt Animation gereist. Der Standardwert ist 3 int
maintainPosition Wenn Sie die Bildlaufleiste behält seine Position während eines Resets wollen, dann wird es nicht mit dem Zusatz von mehr Inhalt blättern. Der Standardwert ist true boolean
scrollbarOnLeft Es gibt an, dass die Bildlaufleiste auf der linken Seite des Inhalts (stellen Sie sicher, auch die CSS spiegelt diesen Punkt) angezeigt werden soll boolean
reinitialiseOnImageLoad Sollte das Skript automatisch neu initialisiert werden, wenn sie in den Inhalt Hochladen von Bildern. Der Standardwert ist false boolean

Ein wenig über die Dynamik der

Wenn die Breite (Höhe) ändert sich dynamisch bewegen, müssen Sie die Funktion konsequent und jScrollPaneRemove JScrollPane nennen.

Angenommen, wir haben eine CSS:

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

Das Skript ändert die Breite scrollbox, wodurch automatisch die Breite .scroll Scheibe zu ändern:

<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 Scrollen mit dem Mausrad

In JScrollPane gibt es ein interessantes Feature. Wenn Sie das Scrollrad der Maus drehen, dann nach all den Inhalt des Behälters proskrollitsya beginnt er die Haupt Scrollbar Seite (natürlich wenn überhaupt) zu spinnen.

Gemessen an den Code jScrollPane.js es absichtlich getan wird (und daher ist kein Bug, sondern ein Feature). Aber wenn diese Funktion verhindert, kann es leicht ausgeschaltet werden.

Wir steigen in jScrollPane.js Code und suchen Sie die Zeile dort:

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

Ändern Sie die Rückkehr dragOccured !; zu return false;

Alles! Nun verhält sich das Rad logischer und nicht die Hauptrollen Seite laufen lassen, bis sich der Mauszeiger nicht über die Grenzen des Behälters gehen.

Blättern Sie in die gewünschte Position (Update 1.08.10)

Manchmal ist es notwendig, sofort (oder auf eine Aktion) um einen Block zu blättern Sie mit zu einer bestimmten Position zu scrollen. Für dieses Plug-in zwei Funktionen hat (warum etwas schlecht beschrieben):

scrollTo - nach Inhalt an die angegebene Position. Block Blättern Sie zu dem Element mit der angegebenen ID - Die Position kann oder Set - ID in Pixel (mit Scroll - Blick von der oberen Begrenzung des gleichen Block) angegeben werden

scrollBy - Scrolleinheit für eine festgelegte Anzahl von Pixeln von der aktuellen Position

Funktionen klammern, an dem in den Block die Initialisierung Scrollen gehängt.

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

Lassen Sie mich anmerken, dass "[0]" - erforderlich ist. Was es ist - ich weiß es nicht (die Plugin-Code zu graben lernen wollen), aber ohne sie funktioniert nicht.

Profis:

    * Arbeitet Adäquat in allen gängigen Browsern;
    * Es ermöglicht Flexibilität, um das Aussehen und das Verhalten der Spirale zu gestalten;
    * Das Mausrad zu blättern.

Abzüglich:

    * Nicht horizontales Scrollen implementiert.