Scrolling with JavaScript

Möchte man auf seiner Website auf einer kleinen Fläche viele Informationen unterbringen, so führt selten ein Weg an einer kleineren Schriftart oder unschönen Scrollbalken vorbei. Der hier vorgestellte Code soll eine Alternative dazu darstellen. Der Inhalt wird in ein div gepackt und läßt sich mittels JavaScript zum scrollen bewegen.

Als erstes sollte die notwendige JavaScript-Klasse für das Scrolling eingebunden werden.

function scroll(objElement, intHeight) {
  var self = this;
  this._y = 0;
  objElement.style.top  = "0px";
  
  this.setPosition = function(intPos, y) {
    if (intPos > 0) intPos = 0;
    if (intPos < intHeight - objElement.offsetHeight)
      intPos = intHeight - objElement.offsetHeight;
    this._y = intPos;
    objElement.style.top  = this._y +"px";
  };
  
  this.scrollY = function(y) { this.setPosition(this._y + y, y); };
  
  this.start = function(y) { 
    this.scrollTimer = window.setInterval( 
      function() { self.scrollY(y); }, 25 ); 
  };
  this.stop = function() { 
    if (this.scrollTimer) window.clearInterval(this.scrollTimer); };
};

Danach ist es notwendig das Objekt, welches den zu scrollenden Inhalt enthält der Klasse "scroll" zu übergeben und damit ein neues Objekt zu erstellen.

var srollObject = null;
 
function initPage() {
  var objElement = document.getElementById('content');
  srollObject = new scroll(objElement, 150);
}
 

Dieser Vorgang wird natürlich erst nach erfolgten Laden der Seite ausgeführt.

<body onload="initPage();">

Über diese zwei Elemente läßt sich das scrollen beeinflussen.

<a href="#" onmouseover="srollObject.start(-4);" 
  onmouseout="srollObject.stop();">&or;</a>
<a href="#" onmouseover="srollObject.start(4);" 
  onmouseout="srollObject.stop();">&and;</a>

Das vorgestellte Beispiel kann im Browser betrachtet oder heruntergeladen werden.

Update! Über das Skript scroll_xy.js (zip) ist auch ein Scrolling entlang der X- bzw. Y-Achse möglich.

8 Responses to “Scrolling with JavaScript”

Dietmar
November 7th, 2006 at 11:03 am

Danke für das Scrolling-Script!
Nach vielen Suchen und Ausprobieren das Beste und Effizienteste.
Ich habe es mir auch erfolgreich für HORIZONTAL-Scroll abgeändert.

Könntest Du mir evtl. einen Tipp geben, wie ich zwei unterschiedliche DIVs
(H-Scroll und V-Scroll) auf einer Seite am besten initialisiere?

Vielen Dank
Dietmar
Ronny Engelmann
November 7th, 2006 at 5:51 pm

Du könntest zwei unterschiedliche Klassen generieren, zum Beispiel “scroll_y” und “scroll_x”.

Oder über einen Parameter die Klasse steuern und den Parameter dementsprechend beim Aufruf der Methode mit angeben:
1. srcollObject.start(‘x’, -4)
Dietmar
November 7th, 2006 at 9:09 pm

Habe es jetzt einmal so realisiert. Scheint auch zu funktionieren… Sollte man es so belassen? Vielen Dank im Voraus!
1. var srollObject_y = null;
2. var srollObject_x = null;
4. function initPage() {
5. var objElement = document.getElementById(‘content_y’);
6. srollObject_y = new scroll(objElement, 150);
8. var objElement = document.getElementById(‘content_x’);
9. srollObject_x = new scroll_h(objElement, 400);
10. }
Ich habe auch einmal eine höhere Geschwindigkeit speziel für “onmousedown” eingestellt. Hier scheint es dann Probleme zu geben, wenn anschließend die “Gegenrichtung” betätigt wird (keine Reaktion mehr).
Ronny Engelmann
November 8th, 2006 at 8:29 pm

Ich habe das Skript abgeändert und dem Post angefügt. Mit scroll_xy.js kann über zwei unterschiedliche Methoden jeweils ein Scrolling entlang der X- bzw. Y-Achse realisiert werden.

Die beiden Methoden lauten startX() und startY().
1. this.startX = function(x) {
2. this.scrollTimer = window.setInterval(
3. function() { self.scrollX(x); }, 1 );
4. };
6. this.startY = function(y) {
7. this.scrollTimer = window.setInterval(
8. function() { self.scrollY(y); }, 1 );
9. };
markus
April 26th, 2007 at 8:03 am

ein nettes feature wäre ein scrollbar zusätzlich bzw. anstelle der pfeile. würde im moment sowas suchen für horizontales scrollen ;)

viele grüße
markus
Niels
May 9th, 2007 at 1:45 pm

Hallo!

Super Script, einfach und unkompliziert einzubinden, genau das was ich gesucht habe. Leider habe ich einen Bug unter Opera gefunden, mit dem Demotext funktioniert es einwandfrei, aber wenn der Text länger ist ruckelt die Seite und unter der Seite ist jede Menge leer, bei kurzen Text nicht. Hat man sich ganz nach unten gescrollt kann man sich ohne diese Probleme wieder hoch und runterscrollen. Im IE und FF läuft es hingegen mit jeder Textlänge einwandfrei.

Wie kann man das denn lösen? Wäre für jede Hilfe zur Lösung dankbar, gerne auch per Mail. Danke im vorraus.

Grüße

Niels
Falko
June 27th, 2007 at 6:31 pm

Hallo!

Ich bin nach einer bald ewigen Suche nach einen geeigneten Script für eine JS-Scrollbar auf Ihre Lösung gefunden und bin richtig begeistert davon. Ich habe auch schon ein wenig damit rumexperimentiert, da ich noch nicht allzuviel Kenntnisse im Umgang von JS habe. Ich bin nun an einem Punkt angekommen, wo ich nicht weiter weiß.

http://falkonien.de/scroll/example.html

Ich möchte gern die beiden Scrollpfeile auf der rechten Seite positionieren. Einer oben und einer unten. Ich habe dies versucht, indem ich für beide Pfeile jeweils einen neuen div erstellt habe um sie zu positioniern. Leider hat dies nicht funktioniert.

Ich weiß das dies kein Forum ist, aber hätten Sie vielleicht eine Lösung für mein Problem???

Grüße,
Falko Behr
Java Script Scroller - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
September 9th, 2008 at 6:06 pm

[...] dann mal Dein Anliegen nach so einem Scroller Google anvertraut. Unter den Beispielen war dieser Scroller, der auch mit Doctype funktioniert. Beispielseite ist dort dabei. Was die Zukunft betrifft, [...]

markuslang.com

bigr-solutions.net

musikwerker.de

projekt-misside-guinea.de

feedyourfeeds.com

Scrolling with JavaScript

8 Responses to “Scrolling with JavaScript”

Leave a Reply