ブラウザのメイン スクロールバーを使用して特定の DIV をスクロール可能にする方法

ブラウザのメイン スクロールバーで DIV をスクロールする

クエリ

問題:

苦労していますブラウザのメイン スクロールバーを使用して特定の DIV をスクロール可能にしながら、Web ページのコンテンツを中央に配置します。

目的:

左側のメインで水平方向に中央揃えのレイアウトを作成します。コンテンツはブラウザのメインスクロールバーで垂直にスクロール可能で、右側のサイドバーは上部に固定されており、マウスを上に置いたときにのみスクロール可能になります。

解決策

一方、Gizmodo の例では、次のスクリプトが組み込まれています。サイドバーの処理では、純粋な CSS を使用して目的の効果を実現できます。解決策には以下が含まれます:

1. さまざまなウィンドウ サイズに合わせて調整しながらレイアウトを水平方向に中央揃えにする
2. ブラウザのスクロールバーを使用して垂直方向にスクロール可能なメイン コンテンツ セクションを作成する
3. サイドバーを固定する必要に応じて引き継ぐ個別のスクロール機能

実装

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>

カスタマイズ

メインコンテンツとサイドバーの幅の両方を必要に応じて構成できます。サイドバーからのスクロール イベントの発生を防ぐため、サイドバーはメイン コンテンツのスクロール コンテナーの子ではないことに注意してください。これにより、個別のスクロール動作が可能になります。

結論

このソリューションは、メイン コンテンツにブラウザのメイン スクロールバーを利用し、メイン コンテンツとサイドバーに独立したスクロール機能を備えた集中レイアウトを提供します。

以上がブラウザのメイン スクロールバーを使用して特定の DIV をスクロール可能にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。