入力フィールドのサイズが変更されたときに、スクロール可能なチャット Div を下部に維持する方法は?

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

概要

チャット アプリケーションでは、スクロール可能なメッセージ コンテナーが使用されるのが一般的です。画面の大部分。ただし、入力フィールドの高さが動的に増加すると、ユーザーのスクロール位置が乱れることがあります。

問題

入力フィールドが増加すると、実質的に外側の div の高さが増加します。メッセージコンテナを押し下げます。これにより、ユーザーは最近のメッセージを見失います。

React ベースのソリューション

1 つのアプローチは、React のコンポーネントDidUpdate ライフサイクル メソッドを使用して入力フィールドの高さを計算し、変更された場合にメッセージ コンテナに通知することです。 。ただし、これにより、パフォーマンスの問題や過剰なメッセージ パッシングが発生する可能性があります。

フレックスボックスを使用した CSS ソリューション

より効率的なソリューションには、CSS フレックスボックスの使用が含まれます。

.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;
}

• フレックス方向: 列反転;メッセージをコンテナの下部に配置します。
• これにより、入力フィールドが大きくなってもメッセージが表示されたままになります。

考慮事項

• IE/Edge/Firefox のバグ: これらのブラウザでは、フレックス方向を使用するとスクロールバーが消える可能性があるというバグが発生します。 column-reverse;.
• 回避策: これに対処するには、次の関数を追加します。

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

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

• コンテナーがこれらのブラウザで入力フィールドのサイズが変更されるときは、下部をクリックしてスクロールバーを調整します。

以上が入力フィールドのサイズが変更されたときに、スクロール可能なチャット Div を下部に維持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。