Individuelle Scroll-Leiste oder designverträgliche Alternative?

[Camping_RIDER]

Aloha ;)

Also, wenn es dir nichts ausmacht, nochmal einen Schritt zurückzutreten und für mich Anfänger noch ein, zwei erläuternde Sätze hinzuzufügen, sei dir mein Dank gewiss! :D

Okay, alles langsam, Schritt für Schritt^^

Aloha ;)

Hallo RIDER :)

Nochmal vielen Dank für die Hilfe! Aber hier überforderst du meine Fähigkeiten in JS arg:

Du definierst dir zunächst in Javascript zwei Funktionen, z.B. ScrollUp(step) und ScrollDown(step). Wenn du die Funktionalität mehr als einmal brauchst solltest du neben step noch einen Parameter elm haben, dem du das zu scrollende Element mitgeben kannst. Außerdem brauchst du eine Variable scrolling = false; Statt onclick der Buttons abzufangen, reagierst du jetzt auf onmousedown, onmouseout und onmouseup.

Wenn ich dich richtig verstehe, meinst du, ich solle die "Scroll"-Funktion quasi generalisieren, damit ich sie nicht für jedes zu scrollende Element neuschreiben muss, richtig?

Jein. Generalisieren würdest du erst mit zusätzlichem Parameter elm. So, ohne elm, ist der Benefit einfach der, dass das Scrollen ganz leicht und ohne Umstände aufgerufen werden kann. Nur um es nachher einfacher in der Notation zu haben, wenn du verstehst.

Die Sache mit den Parametern ist mir leider immernoch ein Buch mit sieben Siegeln! Habe mich bei meinen bislang verwendeten DOM-Funktionen immer erfolgreich darum herumgedrückt, mich damit befassen zu müssen...

Okay, dann zeig ich dir mal, wie die Funktion ScrollDown aussieht, einmal ohne elm und einmal mit elm.

Entweder ohne:

function ScrollDown (step) {  
    window.document.getElementById('scrollelm').scrollTop += step;  
}  

Oder mit:

function ScrollDown (step,elm) {  
    elm.scrollTop += step;  
}  

Du siehst, das zweite generalisiert, das erste nicht. Weil ich beim ersten das Element festgelegt habe, beim zweiten nicht.

(step) und ggf. (elm) (???) müssen doch irgendwie definiert werden? Aber wie ? Oder sind das JS-Befehle?

Das sind keine JS-Befehle. Wie in der Definition der Funktionen oben gezeigt, sind Parameter abstrakte Variablen, die innerhalb der Funktion verwendet werden können. Erst beim Aufruf der Funktion wird festgelegt, welchen Wert diese Variablen haben. Ähnlich wie in Mathe. f(x) = x² z.B. ist eine Funktion namens f mit Parameter x und erst beim Aufruf der Funktion, f(5) beispielsweise, wird der Parameter festgelegt (hier: x=5) und das Verhalten der Funktion klar (in diesem Beispiel: gebe 5² = 25 zurück).

Okay. Also müssten wir, um die Funktion ohne elm aufzurufen, schreiben

ScrollDown(5);

Damit ist intern step = 5 und damit scrollt dein scrollbares Element bei so einem Aufruf um 5px runter.

Die Funktion mit elm bräuchte aber einen zweiten Parameter, etwa

ScrollDown(5,window.document.getElementById('scrollelm'));

Dieser Aufruf der mit-elm-Funktion bewirkt das selbe. Hier müssen wir aber über den zweiten Parameter erst festlegen was elm ist. Übrigens: elm als Variablenname ist meine Abkürzung für Element, ich bin schreibfaul beim Programmieren.

Wie schon gesagt: wenn du nur ein Element auf deiner Seite so scrollbar machst, dann ist die Syntax ohne elm deine wahl (darin ist auch mein vorheriges Codebeispiel geschrieben), wenn du mehr brauchst nimm das mit elm (dann aber daran denken, überall, wo du ScrollDown aufrufst, den zweiten Parameter mit anzugeben).

Und .onmousedown ist dasselbe wie .addEventListener("mousedown", ...); richtig?

Genau. Tut mir leid, ich komme aus einer Zeit, in der es die Syntax über addEventListener noch nicht gab. Alte Gewohnheiten legt man nicht so schnell ab. Du hast aber recht, statt

xyz.onmousedown = function () {  
    ...  
}

solltest du schreiben

xyz.addEventListener("mousedown", (function () {  
    ...  
}));

Wobei ich die 'alte' Schreibweise (die geht ja immer noch) hier zunächst fast einfacher find. Und die neue Schreibweise entfaltet ihr Potenzial ja nur dann, wenn der button verschiedene Funktionen bedienen muss. Kannst die neue aber gerne verwenden^^

Wenn {ScrollDown(5);} für function ScrollDown(step){ ... } steht, was kommt dann in die {} ?

Siehe oben. Mir fällt gerade auf: Eigentlich brauchst du nur EINE Funktion Scroll - die Umterscheidung ob hoch oder runter kannst du dann über den Parameter step vornehmen, für runter z.B. 5 und für hoch -5.

{step= äh.. nach-unten.scrollTop += ?;} aber es soll ja unabhängig vom Element definiert sein?

Wie geschrieben - das muss nicht, kann aber.

Vielleicht noch ein Stichwort zur Generalisierung. Bitte erst lesen, wenn du alles andere voll verstanden hast. Sonst verwirrts wirklich nur.

------------------

Sagen wir, du willst 5 scrollbare Elemente mit id "scrollable1"-"scrollable5" haben. Dazu jeweils zwei Buttons, z.B. für das erste die Buttons mit den ids "scrollbtu1" und "scrollbtd1". Dann kannst du die generalisierte Variante so ganz einfach machen - ohne viel Schreibaufwand:

for (var i = 1; i <= 5; i++) {  
  
     \\ dem button sein i mitgeben bzw. bekanntmachen  
     document.getElementById("scrollbtu"+i).scrollindex = i;  
  
     document.getElementById("scrollbtu"+i).addEventListener('mousedown', ...  
         \\ hier dann im setInterval, wie im Beispiel, aber:  
         Scroll(-5,document.getElementById("scrollable"+this.scrollindex));  
         ...  
      );  
  
     \\ selbes Spiel mit mouseup, mouseout  
  
     \\ selbes Spiel mit document.getElementById("scrollbtd"+i)  
     \\ nur eben immer im setInterval Aufruf von  
         Scroll(+5,document.getElementById("scrollable"+this.scrollindex));  
  
  
}  

Ich gebe zu: es spart Schreibaufwand (Maxime: dont repeat yourself), macht den Coder aber komplizierter.

------------------

* Mammutpost Ende. Bearbeitungszeit etwas mehr als 1h :D hoffe es hilft.

Grüße,

RIDER