CSS のみを使用して DIV を下に動的にスクロールするときに上方向へのジャンプを防ぐにはどうすればよいですか?

上方へのジャンプを防ぎながら DIV を下に動的にスクロールする

問題の概要

自動的にロード時に一番下までスクロールし、ユーザーが上にスクロールしない限り、このスクロール位置が維持されます。この動作は、DIV 内のコンテンツを動的に更新し、新しく追加されたコンテンツが上部に突然ジャンプすることなく下部に表示されたままになるようにするために必要です。

ソリューション

CSS -only ソリューションは、この望ましい動作を実現できます:

ステップ 1: フレックスボックス構成

Flex-direction: column-reverse を使用して、DIV 内のコンテンツのフローを反転します。 。これにより、ブラウザは下部を上部として扱い、最初は事実上下部にスクロールします。

ステップ 2: マークアップの反転

コンテンツの順序が逆になるため、次のことを確認してください。マークアップは逆の順序で構成されており、表示するコンテンツが最初に下に来ます。

CSS コード:

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

HTML コード:

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- Additional content here -->
  <div>Top</div>
</div></code>

説明:

この設定では、コンテンツは最初に「下」要素までスクロールされます。新しいコンテンツが動的に追加されると、そのコンテンツは DIV の「一番下」に配置され、フレックスボックス レイアウトは自動的に DIV を一番下までスクロールしますが、ユーザーが一番下までスクロールして戻ったときにコンテンツが上にジャンプするのを防ぎます。

以上がCSS のみを使用して DIV を下に動的にスクロールするときに上方向へのジャンプを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。