Dr.Web - Das Online Magazin für Seitenbetreiber

Schöner scrollen mit MouseOver

Für Liebhaber von beeindruckenden JavaScript-Spielereien. Dieser Artikel zeigt eine schicke und flotte Lösung, die einen festgelegten Bereich ruckelfrei vertikal bewegt und dabei gänzlich auf Scrollbalken des Browsers verzichtet. Ideal für design-orientierte Projekte.

Eingeschränkte Gestaltung
Die Scrollleiste der meisten Browser lässt sich zwar farblich umgestalten, die Breite des Balken beziehungsweise die Pfeiler dagegen nicht im geringsten. Für schmale Bereiche eines Layouts eignen sich grobe Pfeiler nur bedingt, schränken kreative Umsetzungen ein und sind alles andere als ein Schmuckstück.

Screenshot der Umsetzung

Ausgereifte Alternative
Als Gegenvorschlag werden eigene Bildlauf-Elemente implementiert, die beim Berühren einen markierten Abschnitt rauf und runter bewegen. In unserem Beispiel sind die Schaltflächen in Form eines Quadrats. Dazwischen liegt eine optische Scrollbar, die alternativ problemlos ausgeblendet werden kann. Das Aussehen der Knöpfe lässt sich mit entsprechenden CSS-Eigenschaften anpassen - es muss nicht immer schwarzweiss und eckig sein.

XHTML-Seite der Alternativlösung

 <html>
  <head>
    <style type="text/css">
      p, div {
        padding: 0;
        margin: 0;
      }

      #content {
        clip: rect(0 300px 60px 0);
        width: 300px;
        position: absolute;
      }
      .scroller {
        float: right;
        width: 10px;
      }
      .scroller .arrow {
        border: 1px solid black;
        cursor: pointer;
        padding: 4px;
      }
      .scroller .bar {
        height: 50px;
        margin: 2px;
        border: 1px solid black;
        padding: 0 2px;
      }

      </style>
  </head>

      <body>
    <div class="scroller">
      <p class="arrow" onmouseover="scroll.start(-10)" onmouseout="scroll.stop()" title="Nach oben"></p>
      <p class="bar"></p>
      <p class="arrow" onmouseover="scroll.start(10)" onmouseout="scroll.stop()" title="Nach unten"></p>
    </div>

      <div id="content">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam
    </div>

      <script src="scroll.class.js" type="text/javascript"></script>
    <script type="text/javascript">
      var scroll = new SCROLL(
                              document.getElementById('content'),
                              {
                               'time':   60,
                               'width':  300,
                               'height': 60
                              }
                             );
    </script>
  </body>
</html>

Erklärung des Quelltextes
Der zum Scrollen vorgesehene Sektor bekommt in unserem Fall eine feste ID content. Auf diese ID beziehen wir uns an zwei Stellen: In den CSS-Angaben und beim Initialisieren des Scrollings mittels JavaScript.

CSS-Angaben
In den StyleSheets werden die Eigenschaften für den scrollbaren Bereich (#content) und die Scrollleiste selbst (.scroller) festgelegt. Im Beispiel beträgt die Breite des Bereichs 300px und die Höhe 60px. Diese Werte sind auch im JavaScript-Part der Seite (siehe nächsten Punkt) einzugeben.

JavaScript-Aufruf
Im unteren Teil der Seite wird per JavaScript die fürs Scrolling zuständige Bibliothek scroll.class.js nachgeladen – der Inhalt dieser Datei ist weiter unten zu finden. Anschließend wird die Scroll-Klasse mit den notwendigen Parametern initialisiert: time steht für Geschwindigkeit des Bildlaufs.
width und height sind Daten aus den StyleSheet-Definitionen, können aber für diverse Effekte oder Experimente auch abweichen oder gänzlich entfallen.

Tipp am Rande
Die Pfeile sind mit einem Funktionsaufruf scroll.start(X) ausgestattet, wobei X für die Tiefe des Sprungs innerhalb des Segments steht. Ein negativer Wert bewegt den Content nach oben, positiver entsprechend nach unten.

Inhalt der scroll.class.js

      SCROLL = function(obj, attr) {
  var interval;
  var offset = {
    'top': obj.offsetTop || 0,
    'height': obj.offsetHeight || 0
  };

        this.start = function(amount) {
    /* Default setzen */
    attr.top = attr.top || 0;
    attr.width = attr.width || "auto";
    attr.height = attr.height || "auto";

          /* Intervall starten */
    interval = setInterval(
                           function() {
                                       move(amount);
                                      },
                           attr.time
                          );
};

        this.stop = function() {
    if (interval) {
      clearInterval(interval);
    }
  }

  function move(amount) {
    /* Werte refreshen */
    attr.top += amount;
    attr.height += amount;
    offset.top -= amount;

          /* Grenze überschritten? */
    if (attr.top < 0 || attr.height > offset.height) {
      attr.top -= amount;
      attr.height -= amount;
      offset.top += amount;
      return;
    }

          /* Object bewegen */
    obj.style.clip = "rect(" + attr.top + "px " + attr.width + "px " + attr.height + "px 0)";
    obj.style.top = offset.top + "px";
  }
}