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

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

DDD

リリース： 2024-11-07 10:46:03

オリジナル

596 人が閲覧しました

How to Achieve Selective Scrolling in Web Layouts Using the Browser Scrollbar?

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 は、右側の固定サイドバーです。最後に到達するまで独立してスクロールし、その時点でスクロールはブラウザのスクロールバーに移行します。

追加の考慮事項: