純粋な 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 サイトの他の関連記事を参照してください。