Blog

Hallo Frontend-Freunde. Heute zeige ich euch wie ihr ansprechende Scrollbars erstellen könnt. Die Standard-Scrollbalken erfüllen gerade in schicken Layouts selten die Ansprüche an ein rundum gelungenes Nutzererlebnis. Viele Browser (darunter die maßgeblichen FF und IE) greifen nämlich, wenn es heißt, Scrollbars einzusetzen auf den Standard aus dem Betriebssystem zurück. Gerade in Windows sind das kantige langweilige graue Kästen. Sie sind eben funktionell und machen das, was sie sollen. Aber schön geht anders.

Scrollbars können zwar in Webkit-Browsern individuell gestaltet werden - das erscheint gerade in der Zeit, wo Opera auch auf Webkit umsteigt, interessant - bringt aber nichts, wenn der User IE oder FF nutzt. Und das ist eben die Mehrheit. Zumindest auf dem Desktop. Mobil sieht die Sache wieder anders aus. Doch unser Ziel sind heute schöne Scrollbars am klassichen Desktop-Rechner.

Noch kurz ein Blick wie Scrollbars in einer gewöhnlichen Umgebung ausschauen:

Jeder Frontend-Entwickler kennt sie inzwischen: Die "sanften" Scrollbars aus dem Apple-Umfeld, von Android-Geräten oder z. B. auch von Facebook. Sie erscheinen erst wenn der User den zu scrollenden Bereich fokussiert und verschwinden auf umgekehrte Weise auch wieder. Das könnt ihr auch für eure Website erreichen. Folgendes benötigt ihr:

JS

1. jQuery
2. Das jQuery Plugin jScrollPane
3. Ein Plugin für die Unterstützung des Mausrads (jquery-mousewheel)

CSS

1. Base Style des Plugins jScrollPane
2. CSS Mods für das moderne Look&Feel

.jspVerticalBar {
    width: 8px;
    background: transparent;
    right: 3px;
}

.jspHorizontalBar {
    bottom: 5px;
    width: 100%;
    height: 8px;
    background: transparent;
}
.jspTrack {
    background: transparent;
}

.jspDrag {
    background: url(/pfad/zum/transparenten/png/bild.png) repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspCorner {
    display: none;
}

Wie im Selektor .jspDrag zu sehen, braucht ihr noch ein 1x1 kleines, transparentes PNG.

HTML

Markup HTML mit Dummy-Content zum Testen

<div class="box jScrollPaneTrigger">
    <h2>Die Abenteuer des Lorem Ipsum</h2>
    <div style="height: 160px; overflow-y: scroll;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
    </div>
</div>

Dann noch das Plugin mit einem Schnipsel JS initiieren und das Verhalten des weichen Ein- Ausblendes aktivieren:

    $('.jScrollPaneTrigger').jScrollPane({
        horizontalGutter:5,
        verticalGutter:5,
        'showArrows': false
    });

    //$('.jspDrag').hide();
    $('.jspScrollable').find('.jspDrag').show();

    // Bei mouseenter blenden wir die Scrollbars weich ein
    $('.jspScrollable').mouseenter(function() {
        $(this).find('.jspDrag').stop(true, true).fadeIn('slow');
    });

    // Bei mouseout blenden wir die Scrollbars weich aus
    $('.jspScrollable').mouseleave(function() {
        $(this).find('.jspDrag').stop(true, true).fadeOut('slow');
    });

Fertig. Nun sehen eure Scrollbars anspruchsvoller aus:

Viel Spaß mit jScrollPane. Auf der Plugin-Seite gibt es noch viele weitere Beispiele zu entdecken. Der Vorteil der hier vorgestellten Optik ist allerdings, dass sich die User an diese Art der Darstellung mittlerweile gewöhnt haben.