CSS のみを使用して、読み込み時に Div スクロールを一番下に作成し、ユーザーのスクロール位置を維持するにはどうすればよいですか?

ユーザーのスクロールと同期して Div を動的にスクロールする

読み込み時に自動的に下までスクロールし、その内容を維持する div の解決策を探しています。ユーザーが手動で上にスクロールするまでスクロール位置は変わりますか?この独創的な質問は、この効果を達成するための CSS のみの賢いテクニックを探ります。

解決策を理解する

その秘密は、flex を使用して div 内の要素の順序を逆転させることにあります。 -方向: 列逆。基本的に、ブラウザは div の下部を上部であるかのように扱います。

実装

この手法を実装するには、オーバーフロー: auto とコンテナを作成します。 CSS スタイル内で flex-direction: column-reverse を設定します:

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

次に、動的コンテンツはコンテナ内で逆の順序で配置されます:

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

注意

この手法は、Flexbox をサポートするブラウザでのみ機能することに注意してください。

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