Bagaimana untuk Mengekalkan Div Boleh Tatal Terlekat pada Bahagian Bawah Div Luar Boleh Diubah Saiz?

Div boleh tatal untuk melekat ke bawah, apabila div luar berubah saiz

Dalam aplikasi sembang, adalah perkara biasa untuk mempunyai div boleh tatal dalam div lain yang mengandungi sejarah perbualan. Apabila div luar berubah dalam saiz, seperti apabila medan input di bahagian bawah membesar atau mengecut, div boleh tatal harus mengekalkan kedudukannya di bahagian bawah perbualan.

Penyelesaian Menggunakan CSS

Menggunakan arah-flex: lajur-terbalik; harta pada div luar, anda boleh mencapai tingkah laku ini tanpa sebarang JavaScript. Sifat ini pada asasnya menterbalikkan susunan elemen kanak-kanak, meletakkan div boleh tatal di bahagian bawah.

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.scrollable-div {
  flex: 1;
  overflow: auto;
}

Walau bagaimanapun, penyelesaian ini mempunyai kelemahan: ia boleh menyebabkan bar skrol hilang dalam penyemak imbas tertentu seperti Firefox, IE dan Edge.

Penyelesaian untuk Tersembunyi Bar skrol

Untuk membetulkan isu bar skrol tersembunyi, anda boleh menambah CSS berikut:

/* Reset webkit, including edge */
.scrollable-div-text {
  overflow: visible;
}

@supports (-ms-accelerator: true) {
  .scrollable-div-text {
    overflow: auto;
  }
}

Ini dengan berkesan mencipta div boleh skrol kedua dalam yang pertama, memastikan bar skrol kekal kelihatan.

Butiran Pelaksanaan

// Check if at bottom of scrollable div
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

// Update scroll position if at the bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// Function to resize input and adjust scroll position if needed
function resizeInput() {
  const scrollableDiv = document.getElementById('scrollable-div');
  const input = document.getElementById('input');
  
  // Toggle input height
  input.style.height = input.style.height === '40px' ? '120px' : '40px';

  // Check if scrolled to the bottom and update scroll position if needed
  if (scrollAtBottom(scrollableDiv)) {
    updateScroll(scrollableDiv);
  }
}

Dalam skrip di atas, Fungsi resizeInput() menyemak sama ada bar skrol berada di bahagian bawah div boleh skrol dan melaraskan kedudukan skrol jika perlu.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Div Boleh Tatal Terlekat pada Bahagian Bawah Div Luar Boleh Diubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!