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.
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.
Posted in programmers-corner |
11 Comments »