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

Using Browser Scrollbar for Selective Scrolling in Web Layouts

Your inquiry seeks to emulate the unique scrolling behavior observed on the Gizmodo website. Namely, you aim to enable scrolling of a specific div element using the browser's main scrollbar while keeping another div stationary.

Your provided test pages demonstrate your understanding of centering the layout and enabling vertical scrolling. However, combining these aspects has proven challenging. Let's provide a comprehensive solution that addresses both requirements:

Pure CSS Solution:

Despite the use of additional scripts by Gizmodo, achieving this effect using pure CSS is feasible. Our solution aims to:

• Center the layout responsively.
• Vertically scroll the left-hand content using the browser's scrollbar.
• Keep the right-hand sidebar fixed at the top of the browser window and introduce a scrollbar only on hover.
• Seamlessly transfer scrolling to the browser's scrollbar when reaching the end of the sidebar.

Code Demonstration:

Refer to the following demonstration fiddle:

<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>

Understanding the Solution:

• The #wrapper div serves as the parent container for the entire layout. It ensures horizontal centering.
• #content contains the main content and is vertically scrollable.
• #overlay is a fixed container that allows scrolling of the entire layout. It's used to create the illusion of scrolling content beyond the browser window.
• #sidebar is the right-hand fixed sidebar. It scrolls independently until the end is reached, at which point scrolling transitions to the browser's scrollbar.

Additional Considerations:

• Prevent Scrolling the Main Content on Sidebar Hover: Create a second fiddle that demonstrates how to prevent scrolling of the main content when the mouse is over the sidebar.
• Flexible Widths: Consider implementing flexible width for both the main content and sidebar based on your preferences.

By implementing this solution, you can create elegant web layouts that offer enhanced scrolling experiences for users.

The above is the detailed content of How to Achieve Selective Scrolling in Web Layouts Using the Browser Scrollbar?. For more information, please follow other related articles on the PHP Chinese website!