div automatisch scrollen,...

J

JesusFreak777

Erfahrenes Mitglied
Hallo liebe Leut,

ich habe in meinen ordner (kann man ja mal gebrauchen) folgende scripte gefunden:

HTML: 
<html><head><style>
#contents{ position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;}
</style>
<script>
var t = 0;

function up()
{
t += 10;

with(document.getElementById("contents"))
{
if (t > 0)
t = 0;

if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}

function down()
{
t -= 10;

with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;

if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td><a href="javascript:void(0)"
onclick="up()">up</a></td><td rowspan="2"><div id="scrollable"><div
id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div></td></tr><tr><td><a href="javascript:void(0)"
onclick="down()">down</a></td></tr></table>
</body></html>

und

HTML: 
// start
function start()
{
	init();
}

// Parameter
var sense1 = 10; // Sensibilitaetszone 1 (in %)
var sense2 = 5; // Sensibilitaetszone 2 (in %)
var speed1 = 1;  // Scrollgeschwindigkeit in Zone 1
var speed2 = 5;  // Scrollgeschwindigkeit in Zone 2
var stime  = 10; // Timer zum Scrollen

// Interne Variablen
var scrolling = false;
var scrollfast;
var richtung;
var y_mem = -1;
var myWin;

// Scrolling anhalten
function stopp_scrolling()
{
  scrolling = false;
  y_mem     = -1;
}

// Scroll aktivieren und durchfuehren
function start_scrolling(initial)
{
  if(!scrolling)
    return;

  // Dokumentposition ermitteln
  var dy = (myWin.pageYOffset != null) ? myWin.pageYOffset : myWin.document.body.scrollTop;
  if((y_mem != dy) && !initial)
    return;
  var dx = (myWin.pageXOffset != null) ? myWin.pageXOffset : myWin.document.body.scrollLeft;
  dy += richtung * (scrollfast ? speed2 : speed1);

  // Scrollen
  myWin.scrollTo(dx, dy);
  y_mem = dy;

  // Funktion erneut aufrufen
  setTimeout("start_scrolling(false)", stime);
}

// Auswertung der Mausposition
function zeige(e)
{
  // Mausposition und Dokumentdaten
  var y = myWin.Event ? e.pageY : myWin.event.clientY;
  if(myWin.Event)
    y -= - (myWin.pageYOffset != null) ? myWin.pageYOffset : myWin.document.body.scrollTop;
  var wh = myWin.innerHeight ? myWin.innerHeight : myWin.document.body.clientHeight;
  var dh = myWin.document.height ? myWin.document.height : myWin.document.body.scrollHeight;

  // Zwischenvariablen
  var s1 = Math.round(wh * sense1 / 100);
  var s2 = Math.round(wh * sense2 / 100);
  var now_scroll;

  // Scrollnotwendigkeit ermitteln
  if((y < s1) || (y > (wh - s1)))
  {
    now_scroll = true;
    richtung   = (y < s1) ? -1 : 1;
    scrollfast = ((y < s2) || (y > (wh - s2))) ? true : false;
  }
  else
  {
    now_scroll = false;
    scrolling  = false;
  }

  // Scrollstatus geaendert?
  if(now_scroll != scrolling)
  {
    y_mem     = -1;
    scrolling = now_scroll;
    if(scrolling)
      start_scrolling(true);
  }
}

// Mauskontrolle initiieren
function init()
{
  myWin = window;

  if(myWin.Event)
    myWin.document.captureEvents(Event.MOUSEMOVE);

  myWin.document.onmousemove = zeige;
}
if(window.focus) window.focus();
document.onblur = stopp_scrolling();
//-->

das erste Script scrollt mein div beim drücken eines Buttons und das 2. Script scrollt eine ganze Seite wenn ich mit der Maus einen Punkt Fokussiere (oben für Hoch-scrollen, unten für Runter-scrollen).

jetzt möchte ich gerne beides kombinieren (komme aber nicht weiter)

Meine Seite sieht so aus,
ich habe oben und unten ein Feld, in der Mitte habe ich ein div,...
wenn ich jetzt oben über das Feld mit der Maus fahre, soll die Seite hoch-scrollen, unten eben nach unten.

kann mir da einer weiterhelfen?

Danke

edit:
ach ja, die felder (oben und unten) ist einfach ein bereich, z.B. 10% vom fenster (die vorhandene abstufung für schnelleres scrollen, sollte erhalten bleiben (bei 5%).
 
Zuletzt bearbeitet:
Hallo,

ich habe selbst was gefunden was mir weiter hilft,...

Javascript: 
function toTop(id){ 
document.getElementById(id).scrollTop=0 
} 

defaultStep=1
step=defaultStep 
function scrollDivDown(id){ 
document.getElementById(id).scrollTop+=step 
timerDown=setTimeout("scrollDivDown('"+id+"')",10) 
} 

function scrollDivUp(id){ 
document.getElementById(id).scrollTop-=step 
timerUp=setTimeout("scrollDivUp('"+id+"')",10) 
} 

function toBottom(id){ 
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight 
}

jetzt mache ich einfach 2 divs mit mouseover und die Sache hat sich,...

jetzt noch ein Problem,... wie kann ich die Geschwindigkeit verändern? das ist mir zu langsam,... ggf. wie kann ich mehrere Geschwindigkeitsstufen einstellen?

mfg
 
Zuletzt bearbeitet:
Ich habe mir jetzt nicht den Code angeschaut, aber verändere doch einfach den Wert bei setTimeout:
Javascript: 
timerDown=setTimeout("scrollDivDown('"+id+"')",50)´;
timerUp=setTimeout("scrollDivUp('"+id+"')",50);

PS: Im Forum gibt es den Code-Tag [code=javascript]JJS-Code[/code] speziell für JavaScript ;)
 
Zuletzt bearbeitet:
hab ich schon versucht,... macht gefühlt keinen unterschied,...
edit:
auch den step zu ändern half nichts,...
 
Zuletzt bearbeitet:
sorry mein fehler,... ich hatte das gleiche script nochmal in der seite zum testen (vergessen eine datei abzuspeichern),...

jetzt gehts,...

Danke
 
ok,... leider funktioniert es doch noch nicht ganz,...

hier mal mein Aktueller code:

das script:
Javascript: 
function toTop(id){ 
document.getElementById(id).scrollTop=0 
} 

defaultStep=1
step=defaultStep 
function scrollDivDown(id, speed){ 
document.getElementById(id).scrollTop+=step 
timerDown=setTimeout("scrollDivDown('"+id+"')",speed) 
} 

function scrollDivUp(id, speed){ 
document.getElementById(id).scrollTop-=step 
timerUp=setTimeout("scrollDivUp('"+id+"')",speed) 
} 

function toBottom(id){ 
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight 
}

und meine divs:
HTML: 
<div onmouseover=\"scrollDivDown('folien', '1')\" onmouseout=\"clearTimeout(timerDown)\" class='topper1'></div>
<div onmouseover=\"scrollDivUp('folien', '10')\" onmouseout=\"clearTimeout(timerUp)\" class='downer2'></div>

aber 1. habe ich keine unterschiedlichen scrollgeschwindigkeiten und 2. geht es (wenn ichs direkt in den js code schreibe) nicht schneller als 1, was mir noch nicht reicht,...

1. was mach ich falsch bei der übergabe von der variable?
2. wie kann ich den speed erhöhen,... (ultraschnell wäre schön :D )

Danke
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück