ブラウザのスクロールバーを使用してサイドバーを独立してスクロールさせるにはどうすればよいですか?

ブラウザのスクロールバーを使用して特定の DIV コンテンツをスクロールする方法

はじめに

多くの Web サイト、ギズモードのように、コンテンツの一部がスクロールするレイアウトを持っています。ブラウザのメイン スクロールバーは固定されていますが、他の部分は固定されたままです。これは複雑に見えるかもしれませんが、CSS を通じて完全に実現できます。

解決策

この効果を作成するには、いくつかの側面を考慮する必要があります。

• 水平方向の中央揃え: 全体のレイアウトがブラウザ内で水平方向の中央揃えになるようにします。
• メイン コンテンツのスクロール: メイン スクロールバーを使用して、左側のメイン コンテンツを垂直にスクロールできるようにします。
• 固定サイドバー: を維持します。右側のサイドバーは、カーソルを置いた場合を除き、ウィンドウの上部に固定されます。
• スクロール オーバーフロー: カーソルを置いたときにサイドバーのスクロールを有効にし、独自のサイドバーを使用できるようにします。

実装

CSS:

html, body, * {
    padding: 0;
    margin: 0;
}

.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}

#content {
    margin-right: 260px; /* = sidebar width + some white space */
}

#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

#overlay .wrapper {
    height: 100%;
}

#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}

#sidebar:hover {
    overflow-y: auto;
}

#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

マークアップ:

<div class="wrapper">
    <div>

説明:

• ラッパー:メイン コンテンツとサイドバーの両方に固定幅のコンテナを提供します。
• Content: メインのスクロール可能なコンテンツを定義します。
• Overlay:ブラウザのビューポート全体をカバーする固定要素。メイン コンテンツが表示されている間でもサイドバーが表示されたままになります。
• サイドバー: サイドバーを右側に配置し、カーソルを置いたときのみスクロールできるようにします。

サイドバー ホバー時のスクロールの防止

必要に応じて、サイドバーが開始されないようにすることができますHTML 構造と CSS:

CSS:

#wrapper {
    min-width: unset;
    max-width: unset;
    height: 100%;
}

#content {
    margin-right: 0;
}

#sidebar {
    position: fixed;
    top: 0;
}

Markup:

<div>

を変更することで、カーソルを置いたときにスクロールします。

以上がブラウザのスクロールバーを使用してサイドバーを独立してスクロールさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。