nicht angemeldet
Scrollby
wende mich aus lauter verzweiflung an euch.
ich bin, was javascript anbetrifft ein völliger analphabet, hab die letzten stunden damit verbracht mir diverse seiten und forumpostings zum thema scrollby, scrollto durchzulesen. kann jedoch eine lösung für mein problem weder finden noch irgendwie aus dem gelesenem herleiten.
folgendes problem:
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.
hab auch schon ne menge threads zu diesen thema gefunden, jedoch, so weit ich es verstanden habe, benutzen alle scripts die funktion pageXoffset bzw pageYoffset, die ja berechnet um wieviele pixel man jeweils schon gescrollt hat und einen dann an die anfangsposition 0/0.bringt. da aber in meiem fall ja gar nicht gescrollt wurde und dann zurück will, sondern genau das gegenteil der fall sein soll, bin ich ratlos wie ich das script umschreiben soll.
theoretisch müsste der code umschrieben so lauten:
on click
wenn die gesamte dokumentenbreite(document.body.scrollwidth?) > als die fensterbreite/bildschirm(self.innerWidth?) ist,
dann scroll automatisch zum ende des dokumentes (scrollby (x:y)
tja so weit die theorie, nur leider habe ich keinen blassen schimmer, wie ich das in einen script verpacken soll.
ich hoffe ihr könnt mir weiterhelfen.
danke
das ist mein versuch das zumindest wieder zurück an den anfangspunkt gescrollt wird, alle anderen scripte die ich mir zusammengesponnen habe funktionierten nicht.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
for (var i = 1; i <= 500; i++)
document.write("Zeile " + i);
function NachOben () {
var x = 0;
if (window.pageXOffset) {
x = window.pageXOffset;
}
if (x > 0) {
window.scrollBy(-10, 0);
setTimeout("NachOben()", 10);
}
}
</script>
-
Hallo,
ich möchte mittels eines klicks auf einen navigationspunkt an des rechte ende meines dokuments kommen
also ehrlich gesagt, hab ich sowas noch nie versucht, aber ich denke, da steckt eine Menge Rechenarbeit dahinter. Mit offsetWidth auf dein body angewendet, weißt du zwar, wie weit es bis zum rechten Ende ist, aber soweit willst/kannst du nicht scrollen, da, glaube ich jedenfalls, quasi der linke Rand des horizontalen Scrollbalken ausschlaggebend ist (hier müsste man wohl noch die Breite des sichtbaren Bereichs abziehen, oder so).
Wenn du aber die offsetWidth durch deine Schrittweite teilst (in deinem Fall 10, ohne Minus), weißt du, wie oft der Timer NachOben() aufrufen muss, um ans Ziel zu kommen. Nun kannst du in der NachOben-Fkt. eine Variable hochzählen und sobald diese größer ist als offsetWidth/10 beendest du den Timer. Das kann zwar eine kleine Verzögerung geben, so dass man in den ersten 1-2 Sekunden nach dem "Sprung" nicht nach Links scrollen kann, aber vll. kannst du ja damit leben. Und wenn du am rechten Ende einen Link hast, der dich wieder nach links bringt, kannst du über diesen ja auch erstmal den Timer deaktivieren.Gruß,
Arthur D.--
>> So long, and thanks for all the fish. << -
hi,
ich bin, was javascript anbetrifft ein völliger analphabet
Was ist denn ein Phabet, kenn ich gar nicht?
*scnr*da aber in meiem fall ja gar nicht gescrollt wurde und dann zurück will, sondern genau das gegenteil der fall sein soll, bin ich ratlos wie ich das script umschreiben soll.
Das Gegenteil von was?
theoretisch müsste der code umschrieben so lauten:
on click
wenn die gesamte dokumentenbreite(document.body.scrollwidth?) > als die fensterbreite/bildschirm(self.innerWidth?) ist,
dann scroll automatisch zum ende des dokumentes (scrollby (x:y)Sollte es nicht theoretisch ausreichen, wenn du per scrollBy um einen sehr großen Pixelwert nach rechts scrollen lässt?
Wenn's nix mehr zu scrollen gibt, sollte der browser m.W. automatisch aufhören ...das ist mein versuch das zumindest wieder zurück an den anfangspunkt gescrollt wird, alle anderen scripte die ich mir zusammengesponnen habe funktionierten nicht.
Warum denn jetzt nach oben, ich denke es soll nach rechts gehen?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo Wahsaga,
Sollte es nicht theoretisch ausreichen, wenn du per scrollBy um einen sehr großen Pixelwert nach rechts scrollen lässt?
Wenn's nix mehr zu scrollen gibt, sollte der browser m.W. automatisch aufhören ...der Browser hört dann zwar auf zu scrollen, aber das stört das Script herzlich wenig. Ohne den Timer zu beenden wird er wohl nie wieder von dem rechten Ende wegkommen (da fällt mir ein: Wehret den Anfängen! *g)
Gruß,
Arthur D.--
>> So long, and thanks for all the fish. <<-
hi,
der Browser hört dann zwar auf zu scrollen, aber das stört das Script herzlich wenig. Ohne den Timer zu beenden wird er wohl nie wieder von dem rechten Ende wegkommen
Habe überlesen, dass zeitgesteuert und schrittweise gescrollt werden soll.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
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"> </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
-
Hallo,
tja so weit die theorie, nur leider habe ich keinen blassen schimmer, wie ich das in einen script verpacken soll.
vielleicht sind die Beispiele noch informativ für dich:
Scrollrad bei Mozilla per JavaScript
http://www.messemodehorst.de/corporate-fashion.htmlGrüsse
Cyx23