Heim  >  Artikel  >  Web-Frontend  >  Warum deaktiviert „flex-direction: Column-reverse“ das Scrollen in Firefox, Edge und IE?

Warum deaktiviert „flex-direction: Column-reverse“ das Scrollen in Firefox, Edge und IE?

Linda Hamilton
Linda HamiltonOriginal
2024-10-31 20:51:02618Durchsuche

Why Does `flex-direction: column-reverse` Disable Scrolling in Firefox, Edge, and IE?

Flexbox-Spaltenumkehrproblem in Firefox, Edge und IE

Beim Erstellen responsiver Anwendungen wird häufig Flexbox zum Anzeigen von Inhalten verwendet. In bestimmten Szenarien möchten Sie möglicherweise die Reihenfolge der Elemente umkehren, wenn sich die Bildschirmgröße ändert. Während dies in Chrome reibungslos funktioniert, tritt in Firefox, Edge und Internet Explorer ein rätselhaftes Problem auf.

Das Problem wird deutlich, wenn Sie „flex-direction: Column-reverse“ verwenden, um die Reihenfolge der Elemente umzukehren. In Chrome verhält sich die Bildlaufleiste wie erwartet, sodass Benutzer nach oben scrollen können, um vorherige Elemente anzuzeigen. In den betroffenen Browsern wird die Bildlaufleiste jedoch angezeigt, bleibt jedoch deaktiviert.

Um dieses Problem zu veranschaulichen, untersuchen wir den folgenden Code:

<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}</code>

Bei Verwendung dieses Codes werden Sie Folgendes bemerken oben erwähntes Problem in Firefox, Edge und IE.

Ursache und Lösung

Dieses Problem ist auf einen Fehler zurückzuführen, der in den betroffenen Browsern vorhanden ist. Insbesondere bei Verwendung von „flex-direction: Column-reverse“ und „overflow-y: auto“ funktioniert die Bildlaufleiste nicht wie vorgesehen.

Um dieses Problem zu umgehen, können Sie „column“ anstelle von „flex-direction: Column-reverse“ verwenden . Dieser Ansatz erzielt den gleichen visuellen Effekt und stellt sicher, dass die Bildlaufleiste in allen unterstützten Browsern korrekt funktioniert.

Zusätzliche Informationen

Weitere Details und Einblicke zu diesem Problem finden Sie unter zu den folgenden Ressourcen:

  • [Flexbugs – Column-reverse und overflow-y nicht scrollbar](https://github.com/philipwalton/flexbugs/issues/104)
  • [Fehler 1042151 – Flex-Direction: Column-Reverse (oder „Flex-Direction: Column; Justify-Content: Flex-End“) mit Overflow-y: Auto ist nicht scrollbar] (https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

Das obige ist der detaillierte Inhalt vonWarum deaktiviert „flex-direction: Column-reverse“ das Scrollen in Firefox, Edge und IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn