How to Make a Specific DIV Scrollable Using the Browser's Main Scrollbar?

Scrolling a DIV with the Browser's Main Scrollbar

Query

Problem:

You are struggling to align a webpage's content centrally while making a specific DIV scrollable using the browser's main scrollbar.

Objective:

To create a horizontally centered layout with a left-side main content vertically scrollable by the browser's main scrollbar, and a right-side sidebar fixed at the top, becoming scrollable only when the mouse hovers over it.

Solution

While the Gizmodo example incorporates scripts for sidebar handling, the desired effect can be achieved with pure CSS. The solution involves:

1. Horizontally centering the layout while adjusting for different window sizes
2. Creating a vertically scrollable main content section using the browser's scrollbar
3. Fixing a sidebar with separate scrolling functionality that takes over when necessary

Implementation

CSS:

Markup:

Customization

Both the main content and sidebar width can be configured as desired. Note that the sidebar is not a child of the main content's scrolling container to prevent bubbling up of the scroll event from the sidebar. This allows for separate scrolling behaviors.

Conclusion

This solution provides a centralized layout with independent scrolling capabilities for main content and sidebar, utilizing the browser's main scrollbar for the main content.

The above is the detailed content of How to Make a Specific DIV Scrollable Using the Browser's Main Scrollbar?. For more information, please follow other related articles on the PHP Chinese website!