ブラウザのスクロールバーを使用して Web レイアウトで選択的なスクロールを実現するにはどうすればよいですか?

Web レイアウトでの選択的なスクロールにブラウザのスクロールバーを使用する

あなたの問い合わせは、Gizmodo Web サイトで観察された独特のスクロール動作をエミュレートすることを目的としています。つまり、別の div を静止させたまま、ブラウザのメイン スクロールバーを使用して特定の div 要素のスクロールを有効にすることを目的としています。

提供されたテスト ページは、レイアウトの中央揃えと垂直スクロールの有効化についての理解を示しています。ただし、これらの側面を組み合わせるのは困難であることが判明しています。両方の要件に対処する包括的なソリューションを提供しましょう:

純粋な CSS ソリューション:

ギズモードでは追加のスクリプトを使用していますが、純粋な CSS を使用してこの効果を実現することは可能です。私たちのソリューションの目的は次のとおりです。

• レイアウトをレスポンシブに中央に配置します。
• ブラウザのスクロールバーを使用して左側のコンテンツを垂直にスクロールします。
• 右側のサイドバーを固定したままにします。
• サイドバーの最後に到達すると、スクロールをブラウザのスクロールバーにシームレスに転送します。

コードのデモ:

次のデモ フィドルを参照してください:

<pre class="brush:php;toolbar:false">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 */
}

<pre class="brush:php;toolbar:false"><div>

解決策の理解:

• #ラッパー div は、レイアウト全体の親コンテナーとして機能します。これにより、水平方向の中央揃えが保証されます。
• #content にはメイン コンテンツが含まれており、垂直方向にスクロール可能です。
• #overlay は、レイアウト全体のスクロールを可能にする固定コンテナです。これは、ブラウザ ウィンドウを超えてコンテンツがスクロールしているかのような錯覚を作り出すために使用されます。
• #sidebar は、右側の固定サイドバーです。最後に到達するまで独立してスクロールし、その時点でスクロールはブラウザのスクロールバーに移行します。

追加の考慮事項:

• メインのスクロールを防止するサイドバー上のコンテンツ ホバー: マウスがサイドバー上にあるときにメイン コンテンツのスクロールを防ぐ方法を示す 2 番目のフィドルを作成します。
• 柔軟な幅: 状況に応じて、メイン コンテンツとサイドバーの両方に柔軟な幅を実装することを検討してください。

このソリューションを実装すると、ユーザーに強化されたスクロール エクスペリエンスを提供するエレガントな Web レイアウトを作成できます。

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