Ansprechende Scrolleiste mit Javascript gestalten

Exzellenter Artikel
1 | 18981 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Ansprechende Scrolleiste mit Javascript gestalten" mit Ihrem Wissen!

Anzeige Hier werben

Durch die Möglichkeiten, die HTML und CSS inzwischen bieten, lassen sich umfangreiche und optisch sehr ansprechende Webseiten gestalten - wenn da nicht die hässlichen Browser-Scrollleisten wären. Gerade innerhalb einer Seite können diese das Layout schnell sprengen.

Für Nutzer der Internet Explorers können die Scrollleisten per CSS über proprietäre Eigenschaften angepasst werden. Von dieser Lösung ist aber meist abzuraten, da sie wirklich nur für den Internet Explorer gültig ist. Gleichzeitig werden auch hier nicht alle Wünsche erfüllt, um eine wirklich anpassbare Scrollbar gestalten zu können müsste diese, wie alle anderen Elemente auch, uneingeschränkt per CSS anpassbar sein, also im Idealfall im HTML zur Verfügung stehen.

Genau diese Möglichkeit bietet sich mithilfe von Javascript an. Durch die Verwendung eines geeigneten Javascript-Frameworks, hier jQuery, wird auch das Handling ohne viel Aufwand möglich. Konkret sollen folgende Ziele umgesetzt werden:

  • Auch ohne Javascript nutzbar, Fallback auf reines CSS (overflow:auto)
  • Gewohnte Bedienung möglich (z.B. Mausrad)
  • Möglichst schlanker Code um Wartung zu erleichtern

Verwendete Bausteine

Um das Rad nicht ständig neu erfinden zu müssen wird versucht auf möglichst viele fertige jQuery-Bibliotheken zurück zu greifen. Hierbei zum Einsatz kommen:

Vorgehen

Um den Inhalts-Bereich auch ohne Javascript nutzbar zu halten wird dieser ganz normal über eine feste Höhe/Breite in Kombination mit einem overflow:auto vorbereitet. Per Javascript muss die CSS-Eigenschaft dann auf overflow:hidden gesetzt werden. Gleichzeitig ist es wichtig, dass der scrollbare Bereich auch per CSS (per Javascript) beeinflusst werden kann, also dass es möglich ist zu wählen welcher Bereich gerade sichtbar ist.

Bild zu Ansprechende Scrolleiste mit Javascript gestalten

Hierzu wird der Inhalt in zwei ineinander verschachtelte <div>-Elemente verpackt, das äußere <div> mit einem position:relative, das innere absolut positioniert. Durch diese Kombination ist es möglich das Padding des Inhalts-Bereichs für den scrollbaren Bereich beizubehalten. Das absolut Positionierte Element kann per Javascript dann verschoben werden um das Scrollen nachzubilden.

Die Scrollleiste selbst wird durch einen vertikalen Slider (jQuery UI) dargestellt, hierbei sind nahezu keine Anpassungen notwendig. Der Einfachheit halber wird der Maximalwert des Sliders auf den maximalen Scroll-Offset gesetzt, somit kann der Wert des Sliders direkt für die CSS-Eigenschaft top zum Verschieben des Inhalts verwendet werden.

Da die jQuery Ui Slider sich per CSS nahezu beliebig anpassen lassen sollten für den Designer keine Wünsche mehr offen bleiben. Für den Einstieg kann man sich ein passendes Theme auswählen.

Zusätzlich soll es möglich sein per Mausrad zu scrollen, um eine normale Nutzung zu ermöglichen. Über das jQuery-Modul mousewheel kann ein Scrollen per Mausrad wie ein normales Event verwendet werden.

Der Code

scroll.js  
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// API: content_element, slider[, slider_options]

function js_scrollbar(content, slider, options)
{
    // Standard-Optionen
    var slider_options = {
        orientation: "vertical"
    };
    // Scrollbaren Bereich in zwei <div> verpacken
    var $box = $(content);
    if (!$box.length) return;
    var $inner_scrollbox = $('<div>');
    var $scrollbox = $('<div class="scrollbox">');
    $inner_scrollbox.css({
        position: 'absolute',
        top: '0px',
        left: '0px',
        width: '100%'
    });
    $inner_scrollbox.append($box.children().clone(true));
    $scrollbox.append($inner_scrollbox);
    $box.empty().append($scrollbox);
    $scrollbox.css({
        position: 'relative',
        overflow: 'hidden',
        height: $box.height() + 'px'
    });
    // Browser-Scrollleiste ausblenden
    $box.css({
        overflow: 'hidden'
    });
    // Slider-Parameter
    var $scrollbar = $(slider);
    var scroll_max = $inner_scrollbox.height() - $scrollbox.height();
    // Zu Wert Scrollen
    function scroll_to(value) {
        $inner_scrollbox.css({
            top: '-' + (scroll_max - value) + 'px'
        });
    }
    // Slider-Handler
    function handle_slide(event, ui) {
        scroll_to(ui.value);
    }
    // Slider starten
    slider_options = $.extend(slider_options, options, {
        min: 0,
        max: scroll_max,
        value: scroll_max,
        slide: handle_slide,
        change: handle_slide
    });
    $scrollbar.slider(slider_options);
    // Handler für MouseWheel-Event
    function handle_mousewheel(event, delta) {
        var scroll_delta = delta * 20;
        var value = $scrollbar.slider('value');
        value += scroll_delta;
        if (value > scroll_max) value = scroll_max;
        else if (value < 0) value = 0;
        $scrollbar.slider('value', value);
    }
    // MouseWheel-Handler registieren
     // Falls einziger scrollbarer Bereich evtl.:
     // $('body').bind('mousewheel', handle_mousewheel);
    $box.bind('mousewheel', handle_mousewheel);
    $scrollbar.bind('mousewheel', handle_mousewheel);
    // Handler für Fenster-Resize (optional)
    /*
    function handle_resize() {
        $scrollbox.css({
            height: $box.height() + 'px'
        });
        scroll_max = $inner_scrollbox.height() - $scrollbox.height();
        $scrollbar.slider('option', 'max', scroll_max);
        $scrollbar.slider('value', $scrollbar.slider('value'));
        if ($box.height() > $inner_scrollbox.height())
            $scrollbar.hide();
        else
            $scrollbar.show();
    }
    $(window).bind('resize', handle_resize);
    handle_resize();
    */
}

// Beispiel
$(document).ready(function () {
    js_scrollbar('#content', '#scrollbar');
});

Download

Ein vollständiges Beispiel steht zum Download bereit:

Downloads

Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.

Hier kommt das jQuery UI Theme "Smoothness" zum Einsatz. Ein anderes Theme oder auch eigenes CSS können das Aussehen natürlich nahezu uneingeschränkt verändern.

Weitere Punkte/TODO

  • Tastatur-Eingaben richtig behandeln

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Ansprechende Scrolleiste mit Javascript gestalten" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Ansprechende Scrolleiste mit Javascript gestalten" hier bearbeiten.

Mitarbeiter
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • Derzeit als Geschäftsführer, Webentwickler und Serveradministrator tätig. IT und Coding ist meine Leidenschaft! :-)