Bagaimana untuk Mencegah Lompatan Ke Atas Semasa Menatal DIV ke Bawah Secara Dinamik Menggunakan CSS Sahaja?

Menatal DIV Secara Dinamik ke Bawah Semasa Mencegah Lompatan Ke Atas

Gambaran Keseluruhan Masalah

Anda ingin mewujudkan elemen DIV yang secara automatik tatal ke bawah apabila memuatkan dan mengekalkan kedudukan tatal ini melainkan pengguna menatal ke atas. Tingkah laku ini diperlukan untuk mengemas kini kandungan secara dinamik dalam DIV, memastikan kandungan yang baru ditambah kekal kelihatan di bahagian bawah tanpa lompatan mendadak ke atas.

Penyelesaian

CSS -hanya penyelesaian boleh mencapai gelagat yang diingini ini:

Langkah 1: Konfigurasi Kotak Flex

Gunakan arah flex: songsang lajur untuk membalikkan aliran kandungan dalam DIV . Ini menjadikan penyemak imbas menganggap bahagian bawah sebagai bahagian atas, dengan berkesan menatal ke bawah pada mulanya.

Langkah 2: Pembalikan Penanda

Memandangkan susunan kandungan diterbalikkan, pastikan bahawa penanda disusun dalam susunan terbalik, dengan kandungan yang anda ingin paparkan di bahagian bawah dahulu.

Kod CSS:

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

Kod HTML:

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- Additional content here -->
  <div>Top</div>
</div></code>

Penjelasan:

Dengan persediaan ini, kandungan pada mulanya ditatal ke elemen "Bawah". Apabila kandungan baharu ditambah secara dinamik, ia akan diletakkan di "Bawah" DIV, dan reka letak kotak flex secara automatik menatal DIV ke bawah, sambil menghalangnya daripada melompat ke atas apabila pengguna menatal kembali ke bawah.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Lompatan Ke Atas Semasa Menatal DIV ke Bawah Secara Dinamik Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!