CSS のみを使用して Div を一番下までスクロールしたままにするにはどうすればよいですか?

オーバーフロー Div を下にスクロールしたままにする: CSS のみのソリューション

特定の高さに制限された div コンテナがあるシナリオを考えてみましょうコンテンツが動的に追加されます。ユーザーが手動で上にスクロールする場合を除き、ページが下までスクロールされたままであることを確認したいとします。 JavaScript を使用せずにこれを実現するにはどうすればよいでしょうか?

その答えは、CSS で flex-direction: column-reverse プロパティを使用することです。この手法は、div の下部を上部として効果的に扱います。対象のブラウザがフレックスボックスをサポートしている限り、結果は、新しいコンテンツが追加されると自動的に一番下までスクロールする div になります。

説明のために、HTML と CSS のコード スニペットのサンプルを次に示します。

CSS:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

HTML:

<div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div>

を設定することで、 flex-direction プロパティを column-reverse に設定すると、マークアップの順序が基本的に逆になり、コンテンツが最後までスクロールされたように表示されます。このメソッドを使用すると、ユーザーが明示的に上にスクロールしない限り、下までスクロールされたままになる div を作成でき、最初の問題ステートメントにエレガントに対処できます。

以上がCSS のみを使用して Div を一番下までスクロールしたままにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。