Bagaimana untuk Auto-Tatal Div ke Penghujung Apabila Penambahan Data?

Cara Menatal Secara Automatik ke Penghujung Div selepas Penambahan Data

Apabila bekerja dengan kandungan web dinamik, selalunya wajar untuk mempunyai elemen seperti div secara automatik tatal ke bahagian bawah apabila data baharu ditambah. Ini ialah keperluan biasa untuk elemen seperti tetingkap sembang atau jadual data menatal tanpa henti.

Pertimbangkan senario di mana anda mempunyai jadual yang disertakan dalam div dengan ketinggian tetap dan anda mahu ia menatal secara automatik ke penghujung apabila data baharu dilampirkan. Artikel ini meneroka penyelesaian JavaScript untuk mencapai tingkah laku ini.

Pendekatan JavaScript

Menggunakan Selang:

Jika masa penambahan data tidak diketahui, anda boleh menetapkan selang waktu untuk mengemas kini sifat scrollTop div secara berkala agar sepadan dengan scrollHeightnya. Ini memastikan bahawa div akan sentiasa menatal ke bawah, walaupun jika data baharu ditambah di antara selang waktu.

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

Dalam contoh ini, fungsi setInterval berjalan setiap 5 saat (5000 milisaat) dan mengemas kini scrollTop harta div dengan scrollHeightnya. Ini secara berkesan menatal div ke penghujung.

Pelaksanaan Atas Permintaan:

Jika anda mempunyai kawalan ke atas apabila data ditambahkan pada div, anda boleh melaksanakan penatalan tingkah laku secara manual dengan memanggil fungsi berikut selepas menambah data baharu:

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

Fungsi ini mengambil elemen sebagai hujah dan menetapkan harta scrollTopnya kepada scrollHeightnya, yang akan menatal elemen ke bahagian bawah. Hanya panggil fungsi ini apabila data baharu ditambahkan pada div untuk mencapai kesan autoscroll yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Auto-Tatal Div ke Penghujung Apabila Penambahan Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!