Bagaimana untuk Menyimpan Div Sembang Boleh Tatal di Bahagian Bawah Apabila Medan Input Berubah Saiz?

Div Boleh Tatal Melekat ke Bawah Apabila Div Luar Berubah Saiz

Gambaran Keseluruhan

Dalam aplikasi sembang, adalah perkara biasa untuk mempunyai bekas mesej boleh tatal yang menggunakan kebanyakan skrin. Walau bagaimanapun, apabila medan input meningkat ketinggian secara dinamik, kedudukan skrol pengguna boleh terganggu.

Masalahnya

Apabila medan input berkembang, ia meningkatkan ketinggian div luar secara berkesan, yang menolak bekas mesej ke bawah. Ini menyebabkan pengguna tidak dapat melihat mesej terbaharu.

Penyelesaian Berasaskan React

Satu pendekatan ialah menggunakan kaedah kitaran hayat componentDidUpdate React untuk mengira ketinggian medan input dan memberitahu bekas mesej jika ia berubah . Walau bagaimanapun, ini boleh membawa kepada isu prestasi dan penghantaran mesej yang berlebihan.

Penyelesaian CSS menggunakan Flexbox

Penyelesaian yang lebih cekap melibatkan penggunaan CSS flexbox:

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

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

.chat-input {
  border-top: 1px solid #999;
  padding: 20px 5px;
}

• flex-direction: lajur-terbalik; meletakkan mesej di bahagian bawah bekas.
• Ini memastikan mesej kekal dalam paparan walaupun apabila medan input berkembang.

Pertimbangan

• Pepijat IE/Edge/Firefox: Penyemak imbas ini mempamerkan pepijat di mana bar skrol boleh hilang apabila menggunakan flex-direction: column-reverse;.
• Penyelesaian: Untuk menangani perkara ini, tambahkan fungsi berikut:

function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

• Semak sama ada bekas berada di bahagian bawah dan laraskan bar skrol apabila medan input diubah saiz dalam penyemak imbas ini.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan Div Sembang Boleh Tatal di Bahagian Bawah Apabila Medan Input Berubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!