外側の Div のサイズが変更されたときに、スクロール可能な Div が一番下に留まるようにするにはどうすればよいですか?

外側の Div のサイズ変更時にスクロール可能な Div が一番下にくっつく

この記事では、流動的にサイズ変更される外側の Div 内のスクロール動作に関する問題について説明します。目標は、外側の div で高さが変更されても、内側の div である .messages-container の下部近くのスクロール位置を維持することです。

この問題は、.text-input フィールドが動的に拡張されるときに発生します。ユーザーが会話の下部のメッセージを見失ってしまう可能性があります。

CSS を使用した解決策 (flex-direction: column-reverse)

推奨される解決策は、.messages-container div の CSS の flex-direction: column-reverse プロパティを利用します。このアプローチでは、メッセージをコンテナの下部に配置し、一般的なチャット アプリケーションで観察される動作を模倣します。さらに、メッセージが存在しない場合でもスクロールバーが表示されたままになります。

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

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

注意点とブラウザの互換性

ただし、この方法では IE でバグが発生する可能性があります。 /Edge/Firefox でスクロールバーが非表示になります。

の回避策IE/Edge/Firefox

この問題に対処するには、flex-direction: columns-reverse の動作を模倣する回避策を採用できます。

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

これらの関数を組み込むことで、コードに組み込むと、IE/Edge/Firefox が flex-direction と同じスクロール動作を示すようになります。列反転。

// ...

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

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