Zum Inhalt springen

Marker sichtbar nur bei Scrollbar

Erstellt am 26. Februar 2009 · 3 Antworten · letzte Antwort am 28. Februar 2009

Tags: JavaScript & AJAX, Frage

Coconut ·

Hallo Forum,

Ich habe einen DIV-Container mit einem Inhalt. Bei Overflow ist scroll auf auto gestellt.

Nun soll unterhalb des DIV-Containers ein "Zum Anfang der Seite"-Button angezeigt werden, aber nur, wenn der DIV-Container durch den Overflow des Inhalts eine Scrollbar erscheinen lässt.

Der "Zum Anfang der Seite"-Button ist in einem eigenen DIV-Container mit eigenem Marker gesetzt und funktioniert auch, indem er bei heruntergescrolltem Inhalt wieder zum Anfang des Inhalts springt. Er ist jedoch auch zu sehen, wenn eine Seite keinen Scrollbalken benötigt, da der Inhalt in den DIV-Container passt und dieser keinen Overflow hat.

Bisher ist mir nur klar, dass ich den Marker des Buttons für bestimmte Seiten mit einer Bedingung verstecken kann, z.B. mit PIDinRootline.

Gibt es eine Bedingung für das Vorhandensein einer Scrollbar oder dafür, ob ein DIV Overflow hat? Wahrscheinlich ist das nicht so easy!?

Für Ideen und Ansätze bin ich trotzdem sehr dankbar!

Unbekannter Benutzer ·

Die Scrollbar entsteht auf der Userseite, kommt ja auch auf Browser und Auflösung an, d.h. das kann TYPO3 doch gar nicht entscheiden. Du kannst das vielleicht mit Javascript machen (also den Link immer erzeugen, aber verstecken, wenn die Seite nicht zu lang ist).

Coconut ·

Danke Kitsunet.
Verstehe ... dann werde ich mal mit einem JavaScript-Crashkurs beginnen. Da sind meine Kenntnisse gleich null und im Netz habe noch keine Ansätze in diese Richtung gefunden.

Wenn jemand schonmal so etwas gescriptet hat, wäre ich für entsprechende Code-Vorschläge dankbar.
Also in der Art: Wenn das div mit Namen x eine Scrollbar hat, dann tu es!

Unbekannter Benutzer ·

Dein Ansatz muss so lauten:

1. Auslesen der Browserfenstergröße
2. Auslesen der DIV Größe
3. Berechnen der Abstände etc um zu gucken ob abzüglich allem das DIV ganz in die Browserfenstergröße passt
4. wenn es passt, dann dem Link display: none geben.