JavaScript Scrollbalken mit JScrollpane

Wer die Scrollbalken der Webbrowser selbst farblich gestalten möchte, nutzt dafür am besten die JavaScript Bibliothek JScrollPane von Kelvin Luck. Das Skript basiert auf jQuery und kann mit Hilfe von CSS angepasst werden. Damit lassen sich zum Beispiel OS X Scrollbalken in Windows oder Linux Betriebssystemen erstellen, aber auch ganz einfache Scrollbalken sind möglich. Es werden gestaltungstechnisch keine Grenzen gesetzt.  Ein kleines Beispiel kann man sich hier anschauen.

 

Mit Hilfe dieser JavaScript Bibliothek kann man Scrollbalken sehr schnell und einfach gestalten. Festgestellt habe ich jedoch, dass zum Beispiel ein SlideIn Effekt von jQuery, welcher auf den Inhalt ausgeführt wird, unter Umständen etwas ruckeliger ablaufen kann, wenn gleichzeitig die JScrollPane mit automatischer Reinitialisierung aktiviert ist. Lösung des Problems: auf die automatische Reinitialisierung verzichten. Trotzdem ist JScrollPane sehr empfehlenswert.

Wie man JScrollPane in die eigene Webseite integriert, kann man auf der Webseite nachlesen. Der Quelltext meines JScrollPane Beispiels kann hier angeschaut werden:

 

 

Weiterempfehlen:

7 Gedanken zu „JavaScript Scrollbalken mit JScrollpane“

  1. Hi,
    jScrollpane ist in der Tat eine Recht nette Lösung, möchte man nr statischen Inhalt anzeigen. Bei viel dynamischem Inhalt bin ich damit aber an meine Grenzen gestoßen.
    Das Thema hab ich auch etwas ausführlicher in meinem Blog beleuchtet.

    Grüße,
    Julian

  2. Hi Julian,

    ja ich habe auch Probleme mit dynamischen Inhalten (durch Ajax Aufrufe) bekommen, wie du auch in deinem Blog beschrieben hast. Da bei mir die Inhalte jedoch nicht so riesig sind, konnte ich es bei jScrollPane belassen. Die Reinitialisierung übernimmt bei mir eine eigene Funktion, die nur die per Ajax aktualisierten Container mit einem frischen Scrollbalken und angepasster Höhe ausstattet.
    Funktioniert sogar in einem Android Smartphone, Apple’s iPad und im iPhone.

    Grüße
    Christian

  3. Hi,

    danke erstmal für den anschaulich gestalteten Beitrag und das schöne Beispiel.

    Ich weiß ja, daß alle immer diese Anfängerfragen hassen. Aber ich bin leider Anfänger, der eine recht einfache Webseite gestalten will. Da sie sich aber um das Thema Grafik dreht, soll sie grafisch natürlich schön gestaltet sein. Ich habe mir das Script runtergalden und es mit meinem schmalen wissen nun auch einbauen können. Meine Frage ist jetzt, ob ich das aussehen meines Scollers damit auch nicht nur scripten kann, sondern auf Grafiken verweisen kann, die ich in einem anderen Verzeichnis unterbringe. So kenne ich das von Flash. Natürlich inclusie Mouseover Verhalten und allem was dazu gehört.

    Wenn das geht, gibt es dafür ein idiotensicheres Tutorial, oder würde sich jemand erbarmen, mir das in einfachen Schritten zu erklären. Vielen Dank im Voraus.

    1. Hi, danke für deinen Beitrag!
      du kannst den Scrollbalken nachdem du jScrollPane erfolgreich eingebunden hast beliebig mit Grafiken schmücken. Das geht dann mittels CSS (Cascading Stylesheet).

      Zum Beispiel kannst du mit dem folgenden CSS Beispiel den Balken anpassen:
      .jspTrack {
      background-image: url(../image/your-individual-background-image.png);
      background-repeat: repeat-y;
      }

      Oder du kannst mit der Klasse „jspDrag“ den Scroller selbst anpassen und durch eine Grafik ersetzen:
      .jspDrag {
      background-image: url(../image/your-individual-background-image.png);
      background-repeat: no-repeat;
      height: 10px;
      width: 10px;
      }

      Die ganzen verwendeten Klassen im jScrollPane findest du am einfachsten über Firebug (Addon für Firefox) heraus. Alternativ kannst du die mittlerweile in jedem modernen Webbrowser mitgelieferten Entwicklertools verwenden.

      Mouse-Over Effekte kriegst du übrigens hin, wenn du die Pseudo-Klasse „:hover“ verwendest. Zum Beispiel so:
      .jspDrag:hover {
      background-image: url(../image/your-another-individual-background-image.png);
      }

      Ich kann dir hier natürlich nicht alles von grundauf erklären, ein klein wenig musst du leider selbst recherchieren.

      Viele Grüße
      Christian

  4. Hallo Christian,

    ich beschäftige mich nun seit einigen Stunden mit dem JScrollpane und bin nun auch auf Deinen Eintrag zum Thema gestoßen. Was ich auch tue, das Plugin verschluckt meine Scrollbalken und entsprechend habe ich den hübschen lilafarbenen Standardbalken (geschweige denn einen angepassten Balken) noch nicht zu Gesicht bekommen.
    Ich habe nun ein extrem simples Test-Script erstellt – ohne Erfolg. Könntest Du mal drüberschauen, wäre Dir sehr dankbar!!

    .scroll-pane { width: 200px; height: 400px; overflow: auto; }

    $(document).ready(function()
    {
    $(‚.scroll-pane‘).jScrollPane();
    });

    … content here …
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, …

    1. Hi,

      danke für dein Kommentar. Ich kann dir leider nicht sagen, wieso die Scrollbar bei dir nicht erscheint. Das einzige was mir in den Sinn käme ist: JavaScript ist deaktiviert oder der Text ist zu kurz.
      Es kann natürlich auch sein, das an anderer Stelle etwas vergessen wurde wie jQuery einbinden oder jScrollPane.js vergessen einzubinden. Vielleicht kannst du in der JavaScript Konsole etwas mehr erfahren: Im Google Chrome kommst du dahin mit der F12 Taste und dann unter „Console“. Rot markierter Text sind Fehler, die aufgetreten sind.

      Viele Grüße
      Christian

      1. Danke für die Mühe! Problem nun folgendermaßen gelöst: der zu scrollende Text darf nicht allein in einem div stehen sondern muss (zusätzlich?) noch von einem p umschlossen sein. Also: div p TEXT /p /div.
        Mit Grüßen!

Kommentare sind geschlossen.