Axel Richter: Scrollby

Beitrag lesen

SELF-Forum

Scrollby

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte mittels eines klicks auf einen navigationspunkt an des rechte ende meines dokuments kommen, da die seite nicht von oben nach unten, sondern von links nach rechts gescrollt wird.
so weit so gut. man könnte das mittels eines ankers erledigen, das ist mir klar, jedoch springt die seite dann unschön bis an das ende.
lieber würde ich es mittels scrollby machen, damit das ganze schön nach rechts gleitet.

Du kannst mit [PseudoWindowElement].scrollLeft arbeiten. [PseudoWindowElement] ist ein Element mit overflow:auto oder overflow:scroll.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Scrollbares DIV mit Spezialscrollern ;-)</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
 #container {width:200px; height:300px; margin:auto; background-color:#007070;}  
 #scrolldiv {width:100%; height:100%; background-color:#00AFAF; overflow:auto;}  
 #scrolldiv p {width:800px;}  
</style>  
<script type="text/javascript">  
<!--  
 function right() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.scrollLeft += 10;  
  myScrollDiv.scr = window.setTimeout("right()", 10);  
  
  //Testausgabe von scrollTop  
  var myMonitor = document.getElementById("monitor");  
  myMonitor.innerHTML = myScrollDiv.scrollLeft;  
 }  
  
 function left() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  myScrollDiv.scrollLeft -= 10;  
  myScrollDiv.scr = window.setTimeout("left()", 10);  
  
  //Testausgabe von scrollTop  
  var myMonitor = document.getElementById("monitor");  
  myMonitor.innerHTML = myScrollDiv.scrollLeft;  
 }  
  
 function stop() {  
  var myScrollDiv = document.getElementById("scrolldiv");  
  window.clearTimeout(myScrollDiv.scr);  
 }  
//-->  
</script>  
</head>  
<body>  
<div id="container">  
<div id="scrolldiv">  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo neque, ultrices id, venenatis ut, interdum sit amet, ante. Suspendisse sapien lorem, ornare at, iaculis eu, pellentesque eu, leo. Donec mi elit, interdum sit amet, ornare vel, porttitor sit amet, sapien. Nunc urna lacus, imperdiet vel, imperdiet non, placerat eu, felis. Donec sapien. Donec porta magna ac nibh. Aliquam sagittis sem non sapien. Suspendisse aliquet erat id eros. Cras tincidunt ornare est. Vivamus mattis eros ac tellus. Etiam commodo eros ac risus pellentesque facilisis. Ut tincidunt. Pellentesque feugiat sapien in quam. Suspendisse potenti. Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse ullamcorper nibh. Nulla facilisi.</p>  
</div>  
<button onclick="right();">rechts</button>  
<button onclick="stop();">halt</button>  
<button onclick="left();">links</button>  
</div>  
<div id="monitor">&nbsp;</div>  
  
</body>  
</html>

Das funktioniert in aktuellen FireFox, Opera und IE unter Windows. Das ist _keine_ endgültige Lösung. Klicke [rechts] und dann [links], ohne zwischendurch [halt] zu klicken ;-). Aber das schaffst Du dann alleine.

Siehe auch http://forum.de.selfhtml.org/archiv/2006/7/t132846/#m860158.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln