[JQuery] Content über Schaltflächen scrollen

  • Eher ein kleines Snippet, dass ich für ein aktuelles Projekt geschrieben habe, ich finde es aber ganz praktisch.


    Es ermöglicht für ein HTML-Element mit fester Höhe und overflow:hidden; durch den enthaltenen Content zu scrollen.


    Hier eine simple kleine Demo:
    http://coding-keller.de/scrollable-div/demo.html


    Code für die Demo:


    Erläuterung
    Ich habe um den scrollbaren Content ein div-Element mit fester Höhe und den overflow auf hidden gesetzt. Darin liegt ein div welches den eigentlich Content enthält. Dieses wird beim Scrollen durch die Eigenschaft margin-top innerhalb des umschließenden div-Elements verschoben.
    Wie schnell und flüssig bzw. ruckelig dies geschieht kann über die JS-Variablen scrollPx und scrollSpeed festgelegt werden.
    Die Steuerelemente erhalten onmousedown- bzw. onmouseup-Anweisungen (genausogut kann onmouseover und onmouseout verwendet werden). Bei onmouseup soll das scrollen gestoppt werden, also wird die Funktion scrollstop aufgerufen. Beim onmouseover soll gescrollt werden, also wird die Funktion scroll aufgerufen. Hier müssen in dieser Reihenfolge die JQuery-Handler für das umschließende div, für das div welches den Content enthält, sowie die Richtung in die gescrollt wird ("up" oder "down") übergeben werden.


    Ist denke ich nicht sonderlich kompliziert, wer Fragen hat stelle diese.


    Vielleicht kann es ja jemand mal brauchen.


    P.S.: Ok, das wird wohl auch das letzte Mal sein, dass ich Code hier im Forum poste. Es macht nicht besonders viel Spaß im Nachhinein jeden einzelnen Zeilenumbruch nochmal hier im Eingabefenster setzen zu müssen, weil das Forum Zeilenumbrüche aus Ubuntu nicht erkennt...

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

    Einmal editiert, zuletzt von SinnlosS ()