首頁 > web前端 > css教學 > 為什麼 `flex-direction: column-reverse` 會導致 Firefox、Edge 和 IE 中的滾動問題?

為什麼 `flex-direction: column-reverse` 會導致 Firefox、Edge 和 IE 中的滾動問題?

DDD
發布: 2024-11-01 13:20:03
原創
767 人瀏覽過

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

Flexbox column-reverse 在Firefox、Edge 和IE 中的滾動問題

當嘗試建立一個包含div 列表的響應式應用程式時在較大的螢幕上以向上滾動的方式顯示,在較小的螢幕上以相反順序向下滾動的方式顯示,使用Flexbox 屬性“column-reverse”似乎是理想的解決方案。然而,它在 Chrome 以外的瀏覽器中導致了一個特殊的問題。

HTML 結構與 CSS 樣式

HTML 由一個「清單」div 組成,其中包含一系列「項目」div。 CSS 將「display:flex」和「flex-direction:column-reverse」指派給「list」div,確保項目垂直堆疊並反轉。高度和“overflow-y”屬性啟用了垂直滾動,並添加了邊框以提高視覺清晰度。

跨瀏覽器捲動行為

在 Chrome 中,「清單」 ' div 顯示了一個功能性捲軸,允許使用者向上捲動以查看先前的項目。然而,在 Firefox、Edge 和 IE11 中,滾動條出現但仍處於停用狀態,無法滾動。

錯誤說明

調查顯示此行為是 Firefox 中的錯誤、Edge 和 IE11。當使用'flex-direction:column-reverse'和'overflow-y:auto'時,滾動條不存在。

解決方案

如果'column'屬性使用而不是“column-reverse”,滾動條在所有瀏覽器中都可以使用。 「justify-content: flex-end」屬性對於對齊「list」div 底部的項目以實現正確的向下滾動也是必要的。

其他資訊

有關此問題的更多詳細資訊可以在以下資源中找到:

  • Bug 1042151 - flex-direction : column-reverse (或"flex-direction:column; justify-content:flex-end ") 帶有溢出-y:自動不可滾動
  • Philip Walton / flexbugs - 列反轉和溢出-y 不可捲動

以上是為什麼 `flex-direction: column-reverse` 會導致 Firefox、Edge 和 IE 中的滾動問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板