Jörn Taucher: CSS-Attribut overflow -- Scrolling per JS?

Hallo zusammen!

Kennt vllt. jemand einen standardkonformen JavaScript-Ansatz, um ein per CSS-Attribut `overflow:auto´ mit Scrollbars ausgestattetes <div>-Element dazu zu bringen, intervallmäßig nach oben in die Grundstellung zu scrollen?

Ich konnte mir bislang mit einem <a id="TopOfDIV"></a>´ direkt oberhalb des <div>s behelfen, das ich per setInterval('self.location.href="#TopOfDIV"',…)´ regelmäßig anspringen lasse -- dabei scrollt das <div> brav nach oben.

Nun sieht's aber so aus, dass damit auch jeweils ein kurzer Focus-Wechsel einhergeht, sodass einem User, der derweil bspw. etwas in ein Textfeld schreibt, gnadenlos die Eingabe versaut wird.

Natürlich könnte ich das Intervall per onfocus="clearInterval(…)"´ im Eingabefeld einfach stoppen und onblur="…"´ wieder starten, aber eleganter ist sicher eine allgemeingültige Lösung für <div>s analog zur scrollTo()-Methode des window-Objekts.

Hat jemand eine Idee dafür?

TIA,
Jörn

  1. hi,

    Kennt vllt. jemand einen standardkonformen JavaScript-Ansatz, um ein per CSS-Attribut `overflow:auto´ mit Scrollbars ausgestattetes <div>-Element dazu zu bringen, intervallmäßig nach oben in die Grundstellung zu scrollen?

    Wenn dir statt standardkonform auch funktionierend ausreicht, dann schau dir scrollTop & Co. an.
    M.W. haben das Mozilla und Opera auch implementiert.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Wenn dir statt standardkonform auch funktionierend ausreicht (...).

      Würde es zur Not, aber ...

      M.W. haben das Mozilla und Opera auch implementiert.

      ... der Feuerfuchs macht beim ersten Versuch schlicht gar nichts -- aber immerhin schmeißt er auch keine Fehlermeldung.

      Probiere weiter. Danke dir erstmal!

      Gruß
      Jörn

      1. Hallo,

        ... der Feuerfuchs macht beim ersten Versuch schlicht gar nichts -- aber immerhin schmeißt er auch keine Fehlermeldung.

        Du hast die offsetTop-Eigenschaft des div-Elementobjektes auf 0 gesetzt?

        Das sollte funktionieren.

        Mathias

        --
        »No nations, no borders.«
        Visitenkarte · SELFHTML Weblog
        1. Hi Mathias!

          Du hast die offsetTop-Eigenschaft des div-Elementobjektes auf 0 gesetzt?

          Die war mir (und dem CSS-Werkzeug meines Vertrauens) ehrlich gesagt noch nicht geläufig …

          Das sollte funktionieren.

          … und auch das feurige Füchschen reagiert etwas pikiert darauf: "Fehler: Unbekannte Eigenschaft 'offsetTop'. Deklaration ignoriert."

          Danke dir trotzdem! :-)

          Gruß,
          Jörn

          1. hi,

            Du hast die offsetTop-Eigenschaft des div-Elementobjektes auf 0 gesetzt?
            Die war mir (und dem CSS-Werkzeug meines Vertrauens) ehrlich gesagt noch nicht geläufig …

            Das sollte funktionieren.
            … und auch das feurige Füchschen reagiert etwas pikiert darauf: "Fehler: Unbekannte Eigenschaft 'offsetTop'. Deklaration ignoriert."

            offsetTop ist eine Javascript-Eigenschaft, mit der du den oberen Abstand eines Elementes zum oberen Rand des offsetParent abfragen kannst - in CSS gibt es diese Eigenschaft nicht, sie ergibt sich lediglich implizit aus anderen Eigenschaften wie margin, top und ggf. weiteren.

            Ein Setzen dieser Eigenschaft durch explizite Zuweisung eines Wertes ist deshalb in Javascript auch nicht möglich.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
      2. M.W. haben das Mozilla und Opera auch implementiert.
        ... der Feuerfuchs macht beim ersten Versuch schlicht gar nichts -- aber immerhin schmeißt er auch keine Fehlermeldung.

        Yo wahsaga!

        Kaum macht man's richtig, schon klappt's! ;-)

        Hatte gestern eine kleine, hässliche Ungenauigkeit bei der Implementierung des mouseout-Event Handlers drin, die zwar zu keinem Fehler führte, aber die Aktivierung des Intervalls verhinderte.

        Nun löwt's doch mit `… .scrollTo = 0´ (MSIE, Gecko, Opera).

        Der Focus bleibt dem <input>-Feld dabei erhalten -- ein voller Erfolg!

        Danke für den Tipp!

        Beste Grüße
        Jörn