Mausrad Scrolling in einem DIV

[sir_holmes]

Hallo zusammen,

ich habe ein Problem mit der Implementierung einer Mausrad-Scrolling-Funktion. Ich benutze einen ganz normalen DIV-Scroller. Nun möchte ich aber, dass auch bei Nutzung des Mausrades der Inhalt gescrollt wird. Hat jemand eine Idee wie man das machen kann? Habe nichtmal einen Ansatz und bin aus anderen Scripts auch nicht schlau geworden.

Hier findet Ihr das Skript wie es bisher aussieht:

http://www.webassemblys.de/files/scr.../scroller.html


Danke schonmal für eine Antwort!


P.S.: Das Scrolling-Script

function TextScroll(scrollname, div_name, up_name, down_name)
{
this.div_name = div_name;
this.name = scrollname;
this.scrollCursor = 0;
this.speed = 5;
this.timeoutID = 0;
this.div_obj = null;
this.up_name = up_name;
this.dn_name = down_name;

{
if (document.getElementById) {
div_obj = document.getElementById(this.div_name);
if (div_obj) {
this.div_obj = div_obj;
this.div_obj.style.overflow = 'hidden';
}
div_up_obj = document.getElementById(this.up_name);
div_dn_obj = document.getElementById(this.dn_name);
if (div_up_obj && div_dn_obj) {
div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };

div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

}
}
}

this.stopScroll = function() {
clearTimeout(this.timeoutID);
}

this.scrollUp = function() {
if (this.div_obj) {
this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
}
}

this.scrollDown = function() {
if (this.div_obj) {
this.scrollCursor += this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
}
}

this.resetScroll = function() {
if (this.div_obj) {
this.div_obj.scrollTop = 0;
this.scrollCursor = 0;
}
}
}

[Kropff]

1. The requested URL /files/scrolling/scroller.html was not found on this server.
2. bitte php-tags () benutzen

peter

EDIT:

---

und schau dir mal onscroll an

---

[sir_holmes]

Hi,

ich hatte gerade noch etwas an dem Script geändert... die Datei liegt jetzt auf dem Server!

Schaue mich mal wg. onscroll um.

[CiaoSen]

wenn ich es richtig verstanden habe, willst du nen eigenen Scrollbalken da haben?
Dann wird dir dieses Tutorial dir helfen -> Mouse wheel programming in JavaScript

anderfalls benutzt doch einfach overflow: auto;

[sir_holmes]

Neenee, ich möchte dass man nicht auf die Pfeile klicken muss um zu scrollen, sondern mit dem Mausrad den gleichen Effekt hat. Dabei soll aber kein Scrollbalken sichtbar sein, optisch soll es genau so bleiben. Ist das machbar?

[h3ll]

Also ich kann dir gleich sagen dass Mini-Gucklöcher mit Pfeiltasten zum Scrollen unter den Top 10 der Hassobjekte des Internets sind. Wer sowas macht, will einfach nur seine sadomasochistische Ader an seinen Besuchern ausleben.

Und du kannst nicht davon ausgehen, dass jeder ein Mausrad hat.

Kann man in dem Mistding überhaupt scrollen, wenn Javascript nicht verfügbar ist?

[sir_holmes]

Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.

Der Kunde möchte explizit die beiden Scroll-Pfeile und keinen Balken. Insofern bin ich daran gebunden, finde die Lösung aber zugegebenermaßen auch nicht optimal.

[h3ll]

Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.

Viele AJAX-Anwendungen machen aber Sinn. Kleine Minifenster, in denen man umständlich mit hässlichen Pfeiltasten scrollen muss ergeben keinen Sinn.

Hast du auch getestet, ob die Seite auf einem mobilen Endgerät (PDA, Handy, etc.) korrekt funktioniert? Denn immer mehr Leute surfen unterwegs mit ihrem tragbaren Gerät und diese würde ich nicht vernachlässigen.

Ist keine Kritik an dich, sondern eine Kritik generell an so einem "Konzept". Vielleicht kannst du deinem nächsten Auftraggeber solche schwachsinnigen Ideen besser gleich ausreden.

[Kropff]

@ts
schon dem link von ciaosen gefolgt?

peter

[CiaoSen]

Also das mit den balken ist keine pflicht.
Das Tutorial zeigt dir, wie du die events des Mausrades abfangen kannst und daraus dann dein eigenes scrollen simulieren.

mfg jura

[sir_holmes]

Also ich habe jetzt versucht den Event-Handler einzubauen. Hat soweit auch geklappt... Scrollen per Mausrad klappt. Aber dafür kann man nicht mehr über die Pfeile scrollen!?!? An dem Code habe ich aber nichts verändert:


function TextScroll(scrollname, div_name, up_name, down_name)
{
this.div_name = div_name;
this.name = scrollname;
this.scrollCursor = 0;
this.speed = 5;
this.timeoutID = 0;
this.div_obj = null;
this.up_name = up_name;
this.dn_name = down_name;

{
if (document.getElementById) {
div_obj = document.getElementById(this.div_name);
if (div_obj) {
this.div_obj = div_obj;
this.div_obj.style.overflow = 'hidden';
}
div_up_obj = document.getElementById(this.up_name);
div_dn_obj = document.getElementById(this.dn_name);
if (div_up_obj && div_dn_obj) {
div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_up_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

}
}
}

[COLOR="Red"]this.handle(delta) = function {
if (delta < 0) {
div_dn_obj.onscroll = function() { eval(scrollname + ".scrollDown();") };
}
else {
div_up_obj.onscroll = function() { eval(scrollname + ".scrollUp();") };
}
}[/COLOR]

this.stopScroll = function() {
clearTimeout(this.timeoutID);
}

this.scrollUp = function() {
if (this.div_obj) {
this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
}
}

this.scrollDown = function() {
if (this.div_obj) {
this.scrollCursor += this.speed;
this.div_obj.scrollTop = this.scrollCursor;
this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
}
}

this.resetScroll = function() {
if (this.div_obj) {
this.div_obj.scrollTop = 0;
this.scrollCursor = 0;
}
}
}


Hier noch einmal der Link mit der neuen Version. Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?

HTML Template

[Kropff]

Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?

overflow: none; 

und bitte ab sofort php-tags verwenden! denn den code schau ich mir nicht an.

peter

[sir_holmes]

Mmmmh, funktioniert nicht - weder im JS noch im CSS...
und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?

[Kropff]

Mmmmh, funktioniert nicht - weder im JS noch im CSS...
und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?

weil dir da eine js-fehlermeldung um die ohren gehauen wird. zumindest, wenn man z.b. firebug benutzt

peter

[CiaoSen]

okay hab mal geschaut was du da falsch hast.
1. Da hast du 2 Klammern die zu nichts gehören kannst du raus tun
2. diese Zeile hier -> "this.handle(delta) = function" ist falsch
sie muss so heißen -> "this.handle = function(delta)"

dann gucken wir weiter.

Dein anderes Problem das du jetzt nicht mehr normal scrollen kannst. Das hatte ich auch mal, habs auch wegbekommen. Es liegt daran das er das beim rausgehen vom DIV er nicht den event mit dem mousewheel entfernt. Das musst du ihm nochmal sagen.