Warum verursacht „Flex-Direction: Column-Reverse“ Scrollprobleme in Firefox, Edge und IE?

Flexbox Column-Reverse-Bildlaufproblem in Firefox, Edge und IE

Beim Versuch, eine responsive Anwendung zu erstellen, in der sich eine Liste von Divs befindet auf größeren Bildschirmen mit einem Bildlauf nach oben und auf kleineren Bildschirmen mit einem Bildlauf nach unten mit umgekehrter Reihenfolge angezeigt, schien die Verwendung der Flexbox-Eigenschaft „column-reverse“ so zu sein eine ideale Lösung. Dies führte jedoch zu einem besonderen Problem in anderen Browsern als Chrome.

HTML-Struktur und CSS-Styling

Der HTML-Code bestand aus einem „Listen“-Div, das eine Reihe von enthielt 'Item'-Divs. Das CSS hat dem Div „list“ „display: flex“ und „flex-direction: columns-reverse“ zugewiesen und so sichergestellt, dass die Elemente vertikal gestapelt und umgekehrt sind. Eine Höhe und die Eigenschaft „overflow-y“ ermöglichten vertikales Scrollen, und für die visuelle Klarheit wurden Rahmen hinzugefügt.

Browserübergreifendes Scrollverhalten

In Chrome ist die Liste „list ' div zeigte eine funktionale Bildlaufleiste an, die es Benutzern ermöglicht, nach oben zu scrollen, um vorherige Elemente anzuzeigen. In Firefox, Edge und IE11 wurde die Bildlaufleiste jedoch angezeigt, blieb jedoch deaktiviert und verhinderte das Scrollen.

Fehlererklärung

Untersuchungen ergaben, dass es sich bei diesem Verhalten um einen Fehler in Firefox handelt , Edge und IE11. Bei Verwendung von „Flex-Direction: Column-Reverse“ und „Overflow-Y: Auto“ fehlt die Bildlaufleiste.

Lösung

Wenn die Eigenschaft „Spalte“ verwendet wird Wird anstelle von „column-reverse“ verwendet, ist die Bildlaufleiste in allen Browsern funktionsfähig. Die Eigenschaft „justify-content: flex-end“ ist auch erforderlich, um die Elemente am Ende des „list“-Divs auszurichten, damit ein korrektes Scrollen nach unten möglich ist.

Zusätzliche Informationen

Weitere Details zu diesem Problem finden Sie in den folgenden Ressourcen:

• Bug 1042151 - Flex-Direction: Column-Reverse (oder „Flex-Direction: Column; Justify-Content: Flex-End“) mit Overflow-y: Auto ist nicht scrollbar
• Philip Walton / Flexbugs – Column-Reverse und Overflow -y nicht scrollbar

Das obige ist der detaillierte Inhalt vonWarum verursacht „Flex-Direction: Column-Reverse“ Scrollprobleme in Firefox, Edge und IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!