ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS を使用して固定サイドバーで選択的なスクロールを実現するにはどうすればよいですか?

純粋な CSS を使用して固定サイドバーで選択的なスクロールを実現するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-06 22:45:03
オリジナル
970 人が閲覧しました

How to Achieve Selective Scrolling with a Fixed Sidebar Using Pure CSS?

選択的なスクロールにブラウザのメイン スクロールバーを使用する

Web デザインでは、他の領域を維持したまま、ページの特定のセクションのスクロールを有効にしたい場合があります。修理済み。このテクニックは、GIZMODO などの人気の Web サイトで見られるような独自のレイアウトを作成する場合に特に役立ちます。

問題: GIZMODO のような視覚的に魅力的で機能的なレイアウトを実現するには、開発者はページの位置を揃えるという課題に直面しています。

解決策: 純粋な CSS を使用すると、次の手順に従って目的のレイアウトを実現できます。

  1. 水平方向の中央揃え: ページ コンテンツを水平方向に揃えるには、メイン コンテナの最小幅と最大幅を指定し、margin: 0 auto プロパティを使用して中央揃えにします。
  2. メイン コンテンツのスクロール: 「#content」などの ID を割り当ててメイン コンテンツ領域を指定し、margin-right プロパティで適切なスペースを占めるようにします。
  3. サイドバーのコンテンツ: 「#sidebar」のような ID でサイドバーを作成し、その幅を設定して右側に配置します。 max-height を使用して高さを制限し、適切に配置するには float: right を使用します。
  4. ホバースクロール: マウスを上に置いたときにサイドバーのスクロールを有効にするには、 #sidebar:hover { overflow-y: auto;}.
  5. Scroll Event Isolation: 必要に応じて、メイン コンテンツのスクロール コンテナからサイドバーを分離することで、サイドバーがメイン コンテンツのスクロールをトリガーしないようにします。

デモ: 提供されたデモ フィドルでこのソリューションの動作を確認します。左側のコンテンツはブラウザのスクロールバーでスクロールしますが、右側のサイドバーは固定されたままです。

以上が純粋な CSS を使用して固定サイドバーで選択的なスクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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