Mengapakah `flex-direction: column-reverse` Lumpuhkan Tatal dalam Firefox, Edge dan IE?

Isu Balik Lajur Flexbox dalam Firefox, Edge dan IE

Apabila membuat aplikasi responsif, adalah perkara biasa untuk menggunakan Flexbox untuk memaparkan kandungan. Dalam senario tertentu, anda mungkin mahu membalikkan susunan elemen apabila saiz skrin berubah. Walaupun ini berfungsi dengan lancar dalam Chrome, isu yang membingungkan timbul dalam Firefox, Edge dan Internet Explorer.

Isu ini menjadi jelas apabila menggunakan flex-direction: column-reverse untuk membalikkan susunan item. Dalam Chrome, bar skrol berkelakuan seperti yang diharapkan, membolehkan pengguna menatal ke atas untuk melihat item sebelumnya. Walau bagaimanapun, dalam penyemak imbas yang terjejas, bar skrol muncul tetapi kekal dilumpuhkan.

Untuk menunjukkan isu ini, mari kita periksa kod berikut:

<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>

Apabila menggunakan kod ini, anda akan melihat Isu yang dinyatakan di atas dalam Firefox, Edge dan IE.

Punca Punca dan Penyelesaian

Isu ini berpunca daripada pepijat yang terdapat dalam penyemak imbas yang terjejas. Khususnya, apabila menggunakan flex-direction: column-reverse and overflow-y: auto, bar skrol tidak berfungsi seperti yang dimaksudkan.

Sebagai penyelesaian, anda boleh menggunakan lajur dan bukannya flex-direction: column-reverse . Pendekatan ini akan mencapai kesan visual yang sama dan memastikan bar skrol berfungsi dengan betul dalam semua penyemak imbas yang disokong.

Maklumat Tambahan

Untuk butiran lanjut dan pandangan tentang isu ini, rujuk kepada sumber berikut:

• [Flexbugs - Lajur-terbalik dan limpahan-y tidak boleh ditatal](https://github.com/philipwalton/flexbugs/issues/104)
• [Pepijat 1042151 - flex-direction: column-reverse (atau "flex-direction:column; justify-content:flex-end") dengan limpahan-y: auto tidak boleh ditatal](https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

Atas ialah kandungan terperinci Mengapakah `flex-direction: column-reverse` Lumpuhkan Tatal dalam Firefox, Edge dan IE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!