Alexander Kiel: Scrollposition in «div style="overflow:scroll"»

Hallo,

ich arbeite seit kurzem mit div's, die übergroßen Inhalt haben und sich deshalb als wunderbare scroll-Bereiche eignen, ohne frame-Nachteile zu haben.

Mein Problem besteht darin, wie ich den x und y Wert erhalte, um den der User gescrollt hat.

Ich benötige das, um ein <div> genau über ein <img> aus dem scrollbaren Bereich absolut zu positionieren, welches das <img> selbst als Inhalt hat. Damit will ich per drag&drop ein <img> aus so einem scrollbarem Bereich herausholen und es außerhalb ablegen.

Das funktioniert bei noch nicht gescrollten Bereichen wunderbar, bei gescrollten habe ich jedoch einen Abstand zwischen <img> und <div>.

Das ganze soll ab IE4 funktionieren.

Ich bedanke mich über Lösungsvorschläge oder sonstigen Anregungen, wie ich mein Problem vielleicht ganz anders lösen kann.

Alexander Kiel

  1. Hallo Alexander!

    ich arbeite seit kurzem mit div's, die übergroßen Inhalt haben und sich deshalb als wunderbare scroll-Bereiche eignen, ohne frame-Nachteile zu haben.

    Mein Problem besteht darin, wie ich den x und y Wert erhalte, um den der User gescrollt hat.

    Ich bin mir nicht sicher ob das was du möchtest möglich ist. Man kann den Scrollbalken des Browserfensters "abfragen" <../../sfarchiv/1999_2/t04115.htm#a20044>, aber ob den Scrollbalken eines via CSS-erzuegten Boxes genau so abzufragen möglich ist?

    PS: overlow:scroll; funktioniert so der so nur mit dem IE ab 4.

    Grüße
    Thomas

    1. Ich bin mir nicht sicher ob das was du möchtest möglich ist. Man kann den Scrollbalken des Browserfensters "abfragen" <../../sfarchiv/1999_2/t04115.htm#a20044>, aber ob den Scrollbalken eines via CSS-erzuegten Boxes genau so abzufragen möglich ist?

      Hallo Thomas,

      danke für den Tip, jetzt weiß ich, dass es den Event onscroll gibt. Der ist auf jedes scrollbares Objekt anwendbar und funktioniert auch im scroll-div.
      Aber das löst mein Problem noch nicht, weil ich erstens nicht weiß ob die X ober Y Achse, in welche Richtung und wie schnell, gescrollt wird. Somit kann ich mit bloßem hochzählen eines Wertes beim Eventeintritt nichts erreichen.
      Gibt es vieleicht die Möglichkeit, den Abstand zwischen zwei Objekten herrauszufinden, so wie man mit offsetTop und offsetLeft den Abstand zum Elternelement herausbekommt. Dann währe es möglich, dass ich den Abstand des relativ positionierten <img>, welches im scroll-div irgendwohin gescrollt ist, zu einem absolut positionierten Objekts herauszufinden, wodurch ich dann Rückschlüsse auf den Wert der Verscrollung ziehen könnte.

      OK. Ich beende mal meine wilden Gedanken, aber vielleicht hat ja jemand eine Idee wie man dieses Problem lösen könnte.

      Danke an alle...  Alexander Kiel

      P.S.

      Hat jemand eine vollständige Docu über Eventhandler, speziell bei IE ab 4.01.
      Außerdem würde ich gerne mehr über document.body wissen.

  2. Hallo CSS/JS Junkies,

    ihr wundert euch sicherlich, dass ich mir selber antworte. Es ist im Grund ganz einfach, weil ich mein Problem selber gelöst habe (man lert nie aus).

    Für alle die es interessiert:

    Wie weit der User gescrollt hat bekommt man über die unterschiedlichen Koordinaten der Mausposition heraus.
    Da gibt es window.event.x/window.event.y, welche die Koordinaten bezüglich des <body> objekts sind.
    Desweiteren gibt es window.event.offsetX/window.event.offsetX (wobei das X und Y groß geschrieben werden muß), welche die Koordinaten bezüglich des Objektes, über dem sich der Mauszeiger befindet, darstellen.
    Wenn sich der Mauszeiger über dem Objekt, welches im overflow-div den overflow erzeugt, befindet, dann steht in .x der Abstand zum <body> und in .offsetX der Abstand zur Oberkante diese Objektes.
    Wenn der User noch nicht gescrollt hat ist .x=.offsetX+Abstand Oberkante overflow-div zu <body>.
    Wenn gescrollt wurde ist .offsetX größer als der Abstand Maus zu Oberkante overflow-div.
    Mit den Formeln:
    scrollx=window.event.offsetX-window.event.x+document.all.scrolldiv.style.Left+2;
    scrolly=window.event.offsetY-window.event.y+document.all.scrolldiv.style.Top+2;
    kann man die Verscrollungen berechnen.
    scrolldiv ist der name des overflow-divs und die 2 ergibt sich bei mir so(keine Ahnung)

    Mit dem Event onscroll kann man das scrollen abfangen und wenn die Maus dann mal über dem Objekt im div ist (onmouseover) kann man die Werte berechnen.

    Ich hoffe, dass dies mal jemand gebrauchen kann.

    Umfangreiche Dokumentationen über die Objektstrucktur gibt es unter http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtmlrefs.asp

    Tschüss

    Alex

    1. Hallo Alex!

      Danke! ;-)

      Grüße
      Thomas