Ausführung einer Anweisung erzwingen? --> element.scrollTop

[Roadster]

Hallo miteinander!

Folgendes: Mit der Anweisung element.scrollTop=0; sollte prinzipiell ein Element, dass auf overflow:scroll; gesetzt ist, dazu gebracht werden, dass die Ansicht an den oberen Rand zurückspringt, falls sie sich nicht schon dort befindet.

Dies funktioniert bei mir jedoch nur dann (und das auch nur bedingt!), wenn ich diese Anweisung an ein "click"-Event koppele, nicht jedoch, wenn sie in der ausführenden Funktion nach einem "animationiteration"-Event oder "animationend"-Event aufgeführt ist. - Und ich frage mich, warum?

Es ist wirklich bizarr!

Wenn ich auf meiner Seite in einem meiner Menüs (denn um die geht es bei dem 'element' hier) herunterscrolle, so dass der obere Rand außerhalb des Element-Rahmens (overflow:hidden;) ist, dann kann ich sogar die komplette Seite im Firefox-Browser NEU LADEN (!!!) und wenn ich das Menü dann wieder öffne, steht es noch genau an der Stelle, an der ich es vor dem Reload verlassen habe, obwohl dazwischen - von dem site-reload mal ganz abgesehen - wenigstens an zwei Stellen im Code die explizite Anweisung element.scrollTop=0; hätte ausgeführt werden müssen!

Und selbst wenn ich element.scrollTop=0; an ein "click"-Event knüpfe, funktioniert es erst beim zweiten Click, nie jedoch beim ersten! Das heißt, obwohl der Button, mit dem ich das Menü aufrufe in seiner ausführenden Funktion diese Anweisung enthält, wird sie beim ersten clicken beharrlich ignoriert, so dass das Menü wieder an genau die Stelle gescrollt angezeigt wird, an der ich es hinterlassen habe...

Also frage ich mich

1. warum zum Teufel der Browser diese Anweisung so konsequent ignoriert (obwohl sie ja grundsätzlich funktioniert, jedoch eben nur nach mehrmaligem clicken...) und

2. wie ich die Ausführung dieses Befehls erzwingen kann, denn dieses Browser-Verhalten ist wirklich extrem nervig und für die Benutzbarkeit der Seite alles andere als förderlich! :(

Für guten Rat bin ich wie immer Dankbar!

Beste Grüße,

Roadster.

[Roadster]

Hallo miteinander!

Ok. Offenbar sieht die Sache so aus, dass diese Anweisung nur ausgeführt werden kann, solange ein Element auf display:block; gesetzt ist.

Das heißt, ein 'Zurücksetzen' solange das Menü ausgeblendet ist, ist nicht möglich. Dann muss wohl mit visibility:hidden; gearbeitet werden (sofern dies im konkreten Einzelfall möglich ist).

Warum der Browser den scroll-Status aber sogar nach einem site-reload beibehält ist wirklich schräg!

Naja, sorry für den wasted space, aber vielleicht hilft's jemand, der danach sucht. ;)

Gruß,

Roadster.

[Camping_RIDER]

Aloha ;)

Ok. Offenbar sieht die Sache so aus, dass diese Anweisung nur ausgeführt werden kann, solange ein Element auf display:block; gesetzt ist.

Das heißt, ein 'Zurücksetzen' solange das Menü ausgeblendet ist, ist nicht möglich. Dann muss wohl mit visibility:hidden; gearbeitet werden (sofern dies im konkreten Einzelfall möglich ist).

Das hört sich logisch an.

Warum der Browser den scroll-Status aber sogar nach einem site-reload beibehält ist wirklich schräg!

Das auch. Das ist sogar gar kein Bug, sondern ein Feature ;) Andere hatten das Problem aber auch schon.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Zunächst: Ich hab keine Ahnung, warum das so passiert wie du schilderst. Es gibt für mich jetzt zumindest keinen offensichtlichen Grund.

Tiefergehende Analysen sind sicher nur anhand eines Minimalbeispiels (JSFiddle oder so) möglich... Außer jemandem sonst fällt auf Anhieb etwas ein.

Grüße,

RIDER

[Roadster]

Aloha ;)

Hallo RIDER :)

Ich denke, das Problem ist einfach, dass element.scrollTop auf einer ganz anderen Baustelle arbeitet als die üblichen style.properties, sprich, dass das die Scrolling-Eigenschaft immer nur in Verbindung mit dem Browser 'entsteht'.

Wenn das Element auf display:none; gesetzt ist, gibt es kein 'Scrolling' und dem zur Folge wird jeder Befehl, der während dessen ausgeführt werden soll, ignoriert.

Wenn man also ein Element mit overflow:scroll; auf scrollTop=0; zurücksetzen will, muss das passieren, solange es auf display:block; gesetzt ist.

Wenn ich also mein Menü ausblende und es am Ende der Animation auf display:none; gesetzt wird, ich das Menü aber in seinen Ursprungszustand zurücksetzen will, dann muss ich den Befehl element.scrollTop=0; vor dem Ende der Animation ansetzen, oder aber das Element nach Beendigung der Animation mit setTimeout kurz auf visibility:hidden; setzen, und dann den Befehl scrollTop=0 geben, bevor das Element / Menü endgültig auf display:none; gesetzt wird.

Ist halt recht umständlich...

Anders kann ich's mir nicht erklären. ;)

Gruß,

Roadster.

[Camping_RIDER]

Aloha ;)

Meine erste Antwort hätte sich eigentlich schon erledigt (in dem Moment, als du noch auf display:none verwiesen hattest). Ich hatte nur auf "Antworten" gedrückt, bevor dein zweites Posting da war (um der Wahrheit die Ehre zu geben: Ich hatte die "Vorschau" ne ganze Weile lang in einem inaktiven Tab rumlungern).

Grüße,

RIDER

[Roadster]

Hallo miteinander!

Noch ein kleiner Nachtrag, falls jemand unbedarftes (noch unbedarfter als ich) das hier liest:

Finger weg von visibility:hidden; falls es nicht unbedingt sein muss! Das ist Teufelszeug. Pfui! Damit schafft man sich unter Umständen nur noch mehr Probleme...

Wenn ein Element mit overflow:scroll; 'nach dem Ausblenden' auf display:none; gesetzt werden soll um es dann auf element.scrollTop=0; zurückzusetzen, dann lieber die 'fade-out'-Animation verkürzen (bzw. verlängern) und den scrollTop-Befehl vor dessen Ende ausführen!

.fadeOut{  
animation-name:fadeOutElement;  
/* ... */  
animation-duration:1s;}  
@keyframes fadeOutElement  
 {0% {opacity:1;}  
 90% {opacity:0;}  
100% {opacity:0;}}

element.className="fadeOut";  
setTimeout(function(){  
element.scrollTop=0;},910);  
element.animationPlayState="running";

Beste Grüße,

Roadster.