ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のみを使用して、読み込み時に Div スクロールを一番下に作成し、ユーザーのスクロール位置を維持するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-16 16:38:18
オリジナル
362 人が閲覧しました

How Can I Make a Div Scroll to the Bottom on Load and Maintain User Scroll Position Using Only CSS?

ユーザーのスクロールと同期して 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート