Mengapakah `flex-direction: column-reverse` melumpuhkan bar skrol dalam Firefox, Edge dan IE/Edge?

DDD
Lepaskan: 2024-11-01 01:59:02
asal
933 orang telah melayarinya

Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and IE/Edge?

Gelagat terbalik lajur Flexbox dalam Penyemak Imbas Berbeza

Flexbox menawarkan sistem reka letak yang berkuasa, tetapi ketidakkonsistenan timbul apabila melaksanakan sifat tertentu merentas penyemak imbas. Satu isu sedemikian melibatkan gelagat arah flex: sifat lajur terbalik dalam Firefox, Edge dan IE.

Isunya

Pertimbangkan HTML dan CSS berikut kod:

<code class="html"><div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div></code>
Salin selepas log masuk
<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
}

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

Gelagat Jangkaan

Apabila kod ini dipaparkan dalam Chrome, ia mencipta senarai menegak item yang boleh ditatal ke atas untuk melihat entri sebelumnya.

Gelagat Tidak Dijangka

Walau bagaimanapun, dalam Firefox, Edge dan IE/Edge, bar skrol kelihatan dilumpuhkan.

Sebab

Tingkah laku ini berpunca daripada pepijat dalam penyemak imbas yang disebutkan di atas. Apabila flex-direction: column-reverse digunakan, bar skrol hanya berfungsi dalam Chrome. Jika anda menukar lajur-terbalik kepada lajur sahaja, bar skrol akan berfungsi dalam semua penyemak imbas.

Maklumat Tambahan

Untuk butiran lanjut tentang pepijat ini, rujuk perkara berikut sumber:

  • Pepijat 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
  • Philip Walton / flexbugs - Lajur-terbalik dan limpahan-y tidak boleh ditatal https://github.com/philipwalton/flexbugs/issues/618

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan