Scroll Particular Div Contents with Browser's Main Scrollbar

Scroll particular DIV contents with browser's main scrollbar

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

So you want:

• A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
• The main content at the left which is vertically scrollable by the browser's main scroll bar,
• A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.

See this demonstration fiddle which does all that.

The style sheet:

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 */
}

And the markup:

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.

Update

If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.

I think this new demo fiddle does what you want:

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>

Scroll content within its own div using window's main scrollbar

You should use the same background image (same texture) on the header background like the actual body background has, and you'll get your desired effect.

http://jsbin.com/uqimac/1/edit

Make div scrollable

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

See this demo

Scrolling a DIV to Specific Location

Something like this http://jsfiddle.net/X2eTL/1/:

// On document ready
$(function(){
    // Find selected div
    var selected = $('#container .selected');
    // Scroll container to offset of the selected div
    selected.parent().parent().scrollTop(selected[0].offsetTop);
});

Without the jQuery (put this at the bottom of the < body > tag:

// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;

demo: http://jsfiddle.net/66tGt/

how to make fixed div to cover browser's scroll-bar?

Ok, per my comment, here's the answer:

You are currently experiencing double scrollbars, one for the window and one for the div, as I show here: http://jsfiddle.net/eL5yvony/

There are a couple of ways to correct this.

First, and probably the easiest, is to set the overflow: hidden; on the html and body elements like so: http://jsfiddle.net/eL5yvony/1/

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

This eliminates the browser's scroll bar and only shows the one in the div

Alternatively, if your div is 100% x 100%, then you could do something like this by setting the margin and padding of your html and body elements, without overriding the browser's scroll functionality: http://jsfiddle.net/eL5yvony/4/

div{
    width: 100%; height: 100%;
    overflow: scroll;
}
html, body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
}

How to set up the browser scrollbar to scroll part of a page?

That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.

---

Related Topics