How to Achieve Selective Scrolling with a Fixed Sidebar Using Pure CSS?

Using the Browser's Main Scrollbar for Selective Scrolling

In web design, there are times when you may want to enable scrolling for specific sections of your page while keeping other areas fixed. This technique is particularly useful for creating unique layouts such as those seen on popular websites like GIZMODO.

Problem: To achieve a visually appealing and functional layout like GIZMODO, developers face challenges in aligning page elements, enabling specific scrolling behaviors, and preventing unintentional scrolling in certain page sections.

Solution: Using pure CSS, it is possible to achieve the desired layout by following these steps:

1. Horizontal Centering: To align the page content horizontally, specify a minimum and maximum width for the main container and center it using the margin: 0 auto property.
2. Main Content Scrolling: Designate the main content area by assigning it an id such as "#content" and ensure that it takes up the appropriate space with the margin-right property.
3. Sidebar Content: Create a sidebar with an id like "#sidebar" and set its width, positioning it to the right. Use max-height to limit its height and float: right for proper alignment.
4. Hover Scrolling: To enable scrolling of the sidebar when the mouse hovers over it, use #sidebar:hover {overflow-y: auto;}.
5. Scroll Event Isolation: If desired, prevent the sidebar from triggering scrolling of the main content by separating the sidebar from the main content's scrolling container.

Demonstration: View this solution in action in the provided demonstration fiddle, where the left-hand content scrolls with the browser's scrollbar, while the right-hand sidebar remains fixed.

The above is the detailed content of How to Achieve Selective Scrolling with a Fixed Sidebar Using Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!