Bagaimana untuk Menatal DIV secara Automatik ke Bawah Apabila Data Ditambah?

AutoTatal DIV ke Bawah pada Penambahan Data

Apabila memaparkan data dalam DIV berketinggian terhad, selalunya diingini agar DIV ditatal secara automatik ke penghujung sebagai data baharu ditambah. Ini meningkatkan pengalaman pengguna dan memastikan bahawa maklumat terkini kelihatan tanpa menatal manual.

Konfigurasi CSS

Untuk mendayakan penatalan menegak dalam DIV, anda perlu menetapkan sifat limpahan-y CSSnya kepada "kelihatan" dan tentukan ketinggian tetap. Contohnya:

#data {
  overflow-x: hidden;
  overflow-y: visible;
  height: 500px;
}

JavaScript Solution

Untuk menatal DIV secara automatik ke bahagian bawah pada penambahan data, anda boleh menggunakan kod JavaScript berikut:

function scrollToBottom(element) {
  element.scrollTop = element.scrollHeight;
}

Ini fungsi menerima elemen DOM sebagai hujah dan menetapkan sifat scrollTopnya sama dengan sifat scrollHeightnya. Ini menyebabkan elemen menatal sehingga ke bawah.

Penggunaan

Jika anda tidak tahu dengan tepat bila data akan ditambahkan pada DIV, anda boleh memanggil fungsi scrollToBottom pada biasa selang waktu, contohnya:

window.setInterval(function() {
  var elem = document.getElementById('data');
  scrollToBottom(elem);
}, 5000); // Run every 5 seconds

Sebagai alternatif, jika anda mengawal apabila data ditambahkan, anda boleh memanggil fungsi scrollToBottom sahaja selepas menambah data baharu.

Atas ialah kandungan terperinci Bagaimana untuk Menatal DIV secara Automatik ke Bawah Apabila Data Ditambah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!