ブラウザのスクロールバーを使用して DIV 内で集中スクロールを実現するにはどうすればよいですか?

DIV コンテンツのスクロールにブラウザのスクロールバーを利用する

動的な Web サイトのレイアウトを作成する場合、ブラウザのメイン スクロールバーを利用して、コンテンツ内のコンテンツを選択的にスクロールします。特定の DIV が望ましい効果です。ただし、ユーザーの最初の試みからわかるように、これを達成するのは困難な場合があります。

この動作を実装する鍵は、純粋な CSS を適用することにあります。この効果を実現するには、次の原則に従います。

1. 中央揃えの水平レイアウト: 余白と幅を使用してレイアウトを水平に配置し、さまざまなブラウザ ウィンドウ サイズに合わせて調整します。
2. メイン コンテンツのスクロール: メイン コンテンツに右マージンの値を割り当て、メイン コンテンツをメイン コンテンツから遠ざけます。
3. 固定サイドバー: メイン コンテンツのスクロールとは独立して、ブラウザ ウィンドウの上部に固定されたままのサイドバーを作成します。スクロールを個別に制御し、マウスをホバーしたときのみスクロールバーの表示を実装します。
4. オーバーフロー処理: サイドバーがスクロール端に達すると、ウィンドウのスクロールバーが引き継ぎます。

動作を確認するには、回答に記載されているデモ フィドルを参照してください。例。

更新された考慮事項:

マウスがサイドバー上にあるときにメイン コンテンツがスクロールしないようにするには、サイドバーがメイン コンテンツの子要素でないことを確認します。スクロールコンテナ。これにより、スクロール イベントが親に伝播するのを防ぎます。

この更新された要件を説明するために、別のデモ フィドルが提供されています。

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