jQuery erstellt eine Imitation der Mac Lion OS-Bildlaufleiste effect

nanoScrollerJS ist ein jQuery-Plug-in, das auf einfache Weise den Bildlaufleisteneffekt des Mac OS X Lion-Systems erzielt. Dieses Scrollbar-Plugin verwendet die minimale HTML-Struktur .nano > Andere Bildlaufleistenelemente .pane > werden dynamisch geladen, wenn das Plugin ausgeführt wird. Dieses Bildlaufleisten-Plug-in verwendet native Bildlaufleisten, um auf iPad, iPhone und einigen Android-Tablets zu funktionieren.

Anwendung

HTML-Struktur

Das Folgende ist die HTML-Struktur, die erforderlich ist, damit das Bildlaufleisten-Plug-in funktioniert:

Code kopieren Der Code lautet wie folgt:

... Inhalt hier ...

Die Klassennamen von Nano und Nano-Content können über Plug-In-Parameter geändert werden (nach der Änderung muss auch die CSS-Datei des Plug-Ins entsprechend geändert werden).

CSS-Stil

Fügen Sie die Datei nanoscroller.css in HTML

ein.

Code kopieren Der Code lautet wie folgt:

Sie müssen eine Breite und Höhe für den Container angeben und einige grundlegende Stile für Ihre Bildlaufleiste anpassen, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

.nano {Hintergrund: #bba; Breite: 500px; Höhe: 500px;
.nano > .nano-content { padding: 10px;
.nano > .nano-pane {Hintergrund: #888;
.nano > .nano-pane > .nano-slider {Hintergrund: #111;

JAVASCRIPT

Fügen Sie die Datei jquery.nanoscroller.js in die Seite ein.

Code kopieren

Der Code lautet wie folgt:

Verwenden Sie dann die folgende Methode, um das Bildlaufleisten-Plug-in aufzurufen. Diese Methode wird auf alle DOM-Elemente mit .nano in HTML angewendet: 

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller();

Erweiterte Methoden

Nach oben scrollen:

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ scroll: 'top' });

Nach unten scrollen:

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ scroll: 'bottom' });

Mit einem Versatz nach oben scrollen:

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ scrollTop: value });

Mit einem Versatzwert nach unten scrollen:

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ scrollBottom: value });

Ein Element scrollen:

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ scrollTo: $('#a_node') });

Hören Sie auf zu scrollen. Diese Option macht alle gebundenen Ereignisse des Bildlaufleisten-Plug-Ins ungültig und blendet die Bildlaufleiste auf der Benutzeroberfläche aus. 

Code kopieren

Der Code lautet wie folgt: $(".nano").nanoScroller({ stop: true });

zerstören

Zerstören Sie die nanoScroller-Bildlaufleiste und setzen Sie die Bildlaufleiste auf die native Bildlaufleiste des Browsers zurück:

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ destroy: true });

Stellen Sie die Bildlaufleiste auf Blinken ein. Die Blinkzeit wird durch Parameter eingestellt (Standard 1,5 Sekunden).

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ flash: true });

nanoScroller();

Aktualisieren Sie die Bildlaufleiste. Dieser Vorgang berechnet einfach die Position und Höhe der Bildlaufleiste neu:

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller();

Benutzerdefinierte Ereignisse

scrollend

Ein benutzerdefiniertes Scrollend-Ereignis wird jedes Mal ausgelöst, wenn die Bildlaufleiste zum unteren Rand des Containers scrollt. (Wenn die Bildlaufleiste den unteren Rand des Containers erreicht hat, wird dieses Ereignis nicht ausgelöst, wenn der Benutzer erneut scrollt)

Code kopieren Der Code lautet wie folgt:

$(".nano").bind("scrollend", function(e){

console.log("current HTMLDivElement", e.currentTarget);

});

Einige Browser lösen dieses Ereignis mehrmals gleichzeitig aus, daher sollte jQuery .bind oder .on zum Binden dieses Ereignisses verwendet werden. Sie können das jquery-debounce-Plugin verwenden, um zu veranlassen, dass der Browser dieses Ereignis alle 100 Millisekunden auslöst:

Code kopieren Der Code lautet wie folgt:

$(".nano").debounce("scrollend", function() {

alarm("Das Ende");

}, 100);

Scrolltop

Dasselbe wie das scrollend-Ereignis wird jedes Mal ausgelöst, wenn der Benutzer zum oberen Rand des Containers scrollt.

Das scrollend-Ereignis ist das gleiche wie das scrolltop-Ereignis, es wird jedes Mal ausgelöst, wenn der Benutzer einen Bildlauf durchführt. Dieses Ereignis enthält js-Objektparameter der aktuellen Position, der maximalen Höhe und der Richtung (nach oben oder unten) der Bildlaufleiste:

Code kopieren Der Code lautet wie folgt:

$(".nano").on("update", function(event, Values){ 

console.debug( Werte);

});

Konfigurationsparameter

In diesem Bildlaufleisten-Plug-in ist eine Reihe von Parametern verfügbar:

iOSNativeScrolling

Wenn Sie native Bildlaufleisten in iOS 5 verwenden möchten, können Sie diese auf true setzen. Native Bildlaufleisten funktionieren in iOS 5 besser.

Beachten Sie, dass, wenn iOSNativeScrolling auf true gesetzt ist, .pane und .slider vom Gerät nicht generiert/hinzugefügt werden, um native Bildlaufleisten zu unterstützen.

Standardwert: false.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ iOSNativeScrolling: true });

sliderMinHeight

Legen Sie die Mindesthöhe des Scroll-Elements fest:

Standardwert: 20.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ sliderMinHeight: 40 })

sliderMaxHeight

Legen Sie die maximale Höhe des Scroll-Elements fest:

Standardwert: null.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

PageScrolling verhindern

Auf „true“ setzen, um zu verhindern, dass die Seite scrollt, wenn der Containerinhalt nach oben oder unten scrollt:

Standardwert: false.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ präventPageScrolling: true });

disableResize

Auf „true“ setzen, um zu verhindern, dass sich die Größe des Nanoscrollers ändert. Wenn Sie diese Option auf true setzen, denken Sie daran, die Reset-Methode aufzurufen, da sonst seltsame Probleme auftreten:

Standardwert: false.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ disableResize: true });

immer sichtbar

Auf true setzen, um die automatische Ausblendfunktion zu deaktivieren, wenn die Bildlaufleiste stoppt:

Standardwert: false.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ AlwaysVisible: true });

flashDelay

Wenn Sie die Flash-Option aktivieren, wird diese Option verwendet, um die Flash-Verzögerung festzulegen:

Standardwert: 1500.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ flashDelay: 1000 });

paneClass

Der Klassenname des Bildlaufleisten-Spurelements. Wenn Sie es ändern, müssen Sie entsprechende Änderungen in der CSS-Datei vornehmen:

Standard: 'nano-pane'.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

Der Klassenname des Bildlaufleisten-Containers div. Wenn Sie es ändern, müssen Sie entsprechende Änderungen in der CSS-Datei vornehmen:

Standard: „Nano-Inhalt“.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

tabIndex

Legen Sie die Reihenfolge des scrollbaren Inhalts fest. Bei der Einstellung -1 wird der Inhalt mit der Tabulatortaste übersprungen:

Standardwert: 0.

Code kopieren Der Code lautet wie folgt:

$(".nano").nanoScroller({ tabIndex: 0 });

Browserkompatibel

Desktop

IE7
Firefox 3
Chrom
Safari 4
Oper 11,60
Mobile Geräte

iOS 5 (iPhone, iPad und iPod Touch)
iOS 4 (wird mit einem Plug-in geliefert)
Android Firefox
Nativer Android 2.2/2.3-Browser (wird mit einem Plug-in geliefert)
Android Opera 11.6 (wird mit einem Plug-in geliefert)
Führen Sie nanoScroller besser über Plug-ins in Browsern mobiler Geräte aus

Sie können overthrow.js verwenden, damit nanoScroller in mobilen Browsern besser funktioniert. Es simuliert einen CSS-Überlauf ( overflow: auto;/overflow: scroll; ) auf Mobilgeräten.

Um Overthrow zu verwenden, fügen Sie overthrow.js in die Seite ein:

Code kopieren Der Code lautet wie folgt:

Fügen Sie dann die Overthrow-Klasse zu Ihrem Scrollbar-Inhalts-Div hinzu:

Code kopieren Der Code lautet wie folgt:

... Inhalt hier ...

Oben geht es um die Verwendung des Nanoscroller-Plug-Ins. Ich hoffe, es gefällt Ihnen.