Bagaimanakah Saya Boleh Menyimpan Div Boleh Tatal Terlekat ke Bawah Apabila Div Luarnya Berubah Saiz?

Div Boleh Tatal Melekat ke Bawah Apabila Div Luar Berubah Saiz

Artikel ini menangani kebimbangan mengenai tingkah laku menatal dalam div luar yang mengubah saiz dengan lancar. Matlamatnya adalah untuk mengekalkan kedudukan tatal berhampiran bahagian bawah div dalam, .messages-container, walaupun terdapat sebarang perubahan ketinggian dalam div luar.

Isu ini timbul apabila medan .text-input mengembang secara dinamik, menyebabkan pengguna tidak dapat melihat mesej terbawah dalam perbualan.

Penyelesaian Menggunakan CSS (arah flex: column-reverse)

Penyelesaian pilihan memanfaatkan arah fleksibel CSS: sifat lajur-balikkan untuk div .messages-container. Pendekatan ini menjajarkan mesej di bahagian bawah bekas, meniru gelagat yang diperhatikan dalam aplikasi sembang popular. Selain itu, ia memastikan bar skrol kekal kelihatan walaupun tiada mesej hadir.

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

Kaveat dan Keserasian Penyemak Imbas

Walau bagaimanapun, pendekatan ini mungkin menghadapi pepijat dalam IE /Edge/Firefox di mana bar skrol menjadi tidak kelihatan.

Penyelesaian untuk IE/Edge/Firefox

Untuk menangani isu ini, kami boleh menggunakan penyelesaian yang meniru gelagat arah lentur: terbalik lajur.

// scroll to bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// only shift-up if at bottom
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

Dengan memasukkan fungsi ini ke dalam kod kami, kami boleh memastikan bahawa IE/Edge/Firefox mempamerkan gelagat menatal yang sama seperti arah flex: lajur-terbalik.

// ...

if (atbottom && (!isWebkit || isEdge)) {
  updateScroll(msgdiv);
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Div Boleh Tatal Terlekat ke Bawah Apabila Div Luarnya Berubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!