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:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Div Demo</title>
<style type="text/css">
#my-scroll-wrapper {
height:100px;
width:100px;
overflow:hidden;
padding:10px;
border:1px solid #000;
}
#my-scroll-control span {
display:inline-block;
padding:5px 10px;
}
</style>
</head>
<body>
<div id="my-scroll-control">
<span onmousedown="scroll('#my-scroll-wrapper','#my-scroll-content','up')" onmouseup="scrollstop()">
Hoch
</span>
<span onmousedown="scroll('#my-scroll-wrapper','#my-scroll-content','down')" onmouseup="scrollstop()">
Runter
</span>
</div>
<div id="my-scroll-wrapper">
<div id="my-scroll-content">
Zeile 1<br/>
Zeile 2<br/>
Zeile 3<br/>
Zeile 4<br/>
Zeile 5<br/>
Zeile 6<br/>
Zeile 7<br/>
Zeile 8<br/>
Zeile 9<br/>
Zeile 10<br/>
Zeile 11<br/>
Zeile 12<br/>
Zeile 13<br/>
Zeile 14<br/>
Zeile 15<br/>
Zeile 16<br/>
Zeile 17<br/>
Zeile 18<br/>
Zeile 19<br/>
Zeile 20
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var scrollPx = 1; // Anzahl der Pixel um die bei jedem Schritt gescrollt wird
var scrollSpeed = 5; // Millisekunden Pause zwischen jedem Schritt
var containerHeight,contentHeight,contentMargin,scrollTimer,activeContainer,activeContent;
function scroll(container,content,direction) {
activeContainer = container;
activeContent = content;
if(direction=="up") {
scrollup();
}
else {
scrolldown();
}
}
function scrollstop() {
clearTimeout(scrollTimer);
}
function scrolldown() {
containerHeight = $(activeContainer).height();
contentHeight = $(activeContent).height();
contentMargin = $(activeContent).css("margin-top");
contentMargin = parseInt(contentMargin.substr(0,contentMargin.indexOf("px")),10);
if(containerHeight-contentMargin<contentHeight) {
contentMargin-= scrollPx;
$(activeContent).css("margin-top",contentMargin+"px");
scrollTimer = setTimeout("scrolldown()",scrollSpeed);
}
else {
clearTimeout(scrollTimer);
}
}
function scrollup() {
containerHeight = $(activeContainer).height();
contentHeight = $(activeContent).height();
contentMargin = $(activeContent).css("margin-top");
contentMargin = parseInt(contentMargin.substr(0,contentMargin.indexOf("px")),10);
if(contentMargin<0) {
contentMargin+= scrollPx;
$(activeContent).css("margin-top",contentMargin+"px");
scrollTimer = setTimeout("scrollup()",scrollSpeed);
}
else {
clearTimeout(scrollTimer);
}
}
</script>
</body>
</html>
Alles anzeigen
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...
