スクロール可能な Div をサイズ変更可能な外側の Div の一番下に固定したままにする方法は?

外側の div のサイズが変更された場合、スクロール可能な div が一番下に固定される

チャット アプリケーションでは、一般的に、会話履歴。下部の入力フィールドが拡大または縮小するなど、外側の div のサイズが変化する場合、スクロール可能な div は会話の下部の位置を維持する必要があります。

CSS を使用した解決策

flex-direction の使用: column-reverse;外側の div のプロパティを使用すると、JavaScript を使用せずにこの動作を実現できます。このプロパティは基本的に子要素の順序を反転し、スクロール可能な div を一番下に配置します。

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

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

ただし、 この解決策には欠点があります。スクロールバーが表示されなくなる可能性があります。 Firefox、IE、Edge などの特定のブラウザ。

非表示のスクロールバーの解決策

スクロールバーが表示されない問題がある場合は、次の CSS を追加できます:

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

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

これにより、最初の div 内に 2 番目のスクロール可能な div が効果的に作成され、スクロールバーが表示されたままになります。

実装の詳細

// 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);
  }
}

上記のスクリプトでは、resizeInput() 関数はスクロールバーがスクロール可能な div の下部にあるかどうかを確認し、スクロールを調整します。必要に応じて位置を調整します。

以上がスクロール可能な Div をサイズ変更可能な外側の Div の一番下に固定したままにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。