Webdesign - Scroll-Balken bei kurzen Seiten anzeigen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie kann man einen Scroll-Balken bei kurzen Seiten erzwingen?

31Jan2014

Scroll-Balken bei kurzen Seiten anzeigen


Ein Scroll-Balken ist nichts anderes als eine Bildlaufleiste und ein Steuerelement zur Durchführung des Bildlaufs. Dabei gibt es horizontale und vertikale Bildlaufleisten. In diesem Artikel beziehe ich mich auf die vertikale Bildlaufleiste, die zur Auf- oder Abwärtsverschiebung des sichtbaren Inhalts einer Webseite dient. Sie wird in der Regel rechts neben dem Inhalt in Form eines graues Rechtecks platziert.
Anhand der Größe des Schiebers kann der Betrachter einer Webseite schon die Gesamtgröße des Dokumentes erahnen, und wo er sich ungefähr auf der aufgerufenen Webseite befindet.

Die Steuerung des Bildlaufs ist auf verschiedene Art und Weise möglich.
Bei einem Scroll-Balken gibt es dabei sogar mehrere Varianten:

  • 1. Durch Klick auf eine der beiden Pfeiltasten oberhalb bzw. (beziehungsweise) unterhalb des Schiebers. Dadurch verschiebt sich der Inhalt des Bildes in kleinen Schritten nach oben oder unten. Bleibt die Maustaste gedrückt, wird der Bildlauf kontinuierlich durchgeführt.
  • 2. Durch Klick in den Leerraum zwischen Schieber und Pfeiltaste springt man zum nächsten Bildschirm-Ausschnitt. Der Inhalt wird also seitenweise verschoben. Ähnlich wie bei der Bedienung der [Leer-Taste] (Bildschirm-Ausschnitt geht nach unten) oder der [Shift-Taste und Leer-Taste] (Bildschirm-Ausschnitt geht nach oben)
  • 3. Durch Ziehen des Schiebers in die gewünschte neue Position.

Als Alternative ist die Bedienung mit der Tastatur bereits oben unter dem zweiten Punkt beschrieben.
Probieren Sie es aus. Markieren Sie die letzte, noch lesbare Zeile am unteren Ende des Fensters mit der Maus und klicken Sie dann in den beschriebenen Leerraum oder drücken die [Leer-Taste]. Die Zeile ist jetzt am oberen Ende des Bildschirms zu lesen.
Darüber hinaus ist der Bildlauf über das Mausrad natürlich ebenfalls sehr einfach zu steuern.


Es gibt Webseiten die sind so kurz, dass ein Scroll-Balken nicht notwendig ist um den Inhalt darzustellen. Das ist aber beim Blättern von einer langen auf eine kurze Seite störend, da die neu aufgerufene Unterseite dann um die halbe Breite eines Scroll-Balken zur Seite springt.
Gerade bei zentrierten Seiten ist das sehr störend.

Ich sorge deshalb mit "scroll" dafür, dass immer ein vertikaler Scroll-Balken auf der rechten Seite angezeigt wird, auch wenn der Inhalt den vollständigen Platz nicht ausfüllt. Hierfür ist nur eine kleine Ergänzung im CSS (Cascading Style Sheet) notwendig:

html {
    overflow-y: scroll;
}

Eine andere Möglichkeit besteht auch darin die Seitenhöhe mit CSS (Cascading Style Sheet) größer als 100% zu erzwingen. Das sieht dann so aus:

body {
    height: 101%;
}

html {
    height: 101%;
}

Damit ist die Seitenhöhe immer größer als 100%. Das Problem ist nur, dass auf Grund der zusätzlichen Pixel die die Seite nun hat, der Benutzer tatsächlich nach unten Scrollen kann, obwohl weiter unten gar kein Inhalt mehr vorhanden ist. Das ist dann nicht wirklich gut gelöst und aus diesem Grund benutze ich auch die erste Variante!

Zum Seitenanfang springen Λ