Zurück zum Blog

jScrollPane. Oder wie ich es nenne: jScrollPain in the ass.

Warum das jquery Plugin „jscrollpane“ zwar geil, aber nicht so richtig toll im Umgang mit dynamisch nachgeladenen Daten ist.

So funktioniert das jQuery Plugin „jScrollPane“:

Wie dir vielleicht aufgefallen ist, sieht unsere Browserscrollbar nicht so aus wie jede Andere. Dafür ist ein jQuery Plugin namens jScrollPane verantwortlich. Es setzt den Body der Website auf overflow:hidden und stellt damit das standard Scrolling aus (Horizontal und Vertikal). Dann wird ein Wrapper (jspContainer) um den gesamten Inhalt gesetzt und eine bestimmte Größe vergeben die genau die Dimensionen des Browserfensters einnimmt. In diesem Container ist ein weiteres Div (jspPane). Dieses ist absolute positioniert (position:absolute) und wird beim scrollen je nach Scrollposition negative nach Oben verschoben.

Sprich: Mein Browserfenster ist 768px hoch, aber mein darin befindliche Content hat eine Höhe von 1500px. Dann hat jspContainer eine Höhe von 768px und beim scrollen um z.B. 200 Pixel wird der jsPane-Container auf top:-200px gesetzt und somit nach Oben geschoben. Durch die Einbindung des jQuery „mousewheel“ Plugins kann man dann auch ganz normal mit seinem Mausrad scrollen und der User merkt keinen Unterschied zu dem nativ scrolling.

Die Position und Größe des Scrollbalkens wird dabei dynamisch von jScrollPane ausgerechnet und man kann das Ding natürlich mit custom styles umgestalten wie man möchte.

Das tolle daran:

Es funktioniert als eine der wenigen Lösungen in allen Browsern, sieht geil aus und ist leicht einzubauen.

Das schlechte daran: Die Lösung für dynamische Inhalt + jScrollPane:

autoReinitialise: true

//Der Aufruf sieht dann also z.B. so aus: 
$('#complete-page').jScrollPane({
showArrows: true,
autoReinitialise: true
});

Es gibt keinen Listener für die Größe des Inhalts und gerade bei dynamischen Seiten wie Unserer, muss man bei jeder nachträglichen Veränderung der Inhaltsgröße die neuen Höhenangaben an das Plugin übergeben und den Scrollbalken neu rendern, damit man bis zum Contentende scrollen kann. Das ist schon recht aufwendig aber noch okay bei Events die man selbst lostritt wie das triggern eines Ajax-Requests um neue Posts zu holen oder mehr Infos zu einem Post anzuzeigen wie auf der herrlichen Referenzseite. Da gibt es aber auch Callbacks und man kann/muss prüfen ob man alle Daten zusammen hat (Bilder geladen sind usw.), dann ausrechnen wie hoch der neue Inhalt ist und den Scrollbalken darauf abstimmen bzw. scrollPane reinitialisen.

// Hier wird die Funktion global das betroffene Div angewandt
pane = $('#complete-page');
pane.jScrollPane();
api = pane.data('jsp');

// Diese Funktion wird nun nach allen Veränderungen am Content aufgerufen um die Größe wieder passend zu machen.
api.reinitialise();

Wenn aber asynchrone Features wie die Kommentarfunktion von Disqus geladen werden, ist das schon deutlich nerviger.
Dazu kommt, dass es nicht auf mobilen Geräten funzt und ich daher eine komplett überarbeitete mobile View bauen musste. Natürlich hat das auch seine Vorteile, da somit Datengrößen reduziert wurden und wirklich nur die Scripte eingebunden werden die wir auch benötigen, aber trotzdem lästig :)

Alles in Allem hat mich dieser kleine Sahnelook locker 20 Stunden mehr Arbeit und ein paar Tobsuchtsanfälle gekostet und ich würde jedem raten der nicht gerade ne statische Seite baut, auf Alternativen zu setzen.

Alternativen:

Crossbrowser gibt es aber eben nicht viele Möglichkeiten und da ich das hier schon mal auf einen kleinen Container angewandt habe und es da Problem funktionierte dachte ich das läuft so durch, aber Vorsicht bei der Anwendung an ganzen Seiten mit dynamischen Inhalten.

Webkit kann das zum Glück und auch sehr ausgefeilt. Für alle mit geilen Browsern kann man so also sehr leicht ein kleines grafischen Schmankerln mit rausschicken.

::-webkit-scrollbar {}
::-webkit-scrollbar-button
::-webkit-scrollbar-track
…

Hier gibt’s alles zu dem Thema: Custom Scrollbars in Webkit

Sogar der IE kann das ein bisschen. Zumindest die Farbe kann hier angepasst werden.

body {
scrollbar-face-color: #b46868;
}

Arbeits & Socialverhalten

Mit dem Fortsetzen des Besuchs dieser Website akzeptieren Sie die Verwendung von Cookies. Für mehr Informationen und zur Änderungen der Cookie-Einstellungen auf Ihrem Computer, lesen Sie bitte den Datenschutz.

Ich akzeptiere