始终在特定的div上滚动

Question

Let's say I have a site with a central div, approximately 50% of the width of the window, with other divs either side of it filling up the remaining space. The spanning divs are fixed, and don't move, nor can they scroll.

At the moment, when my mouse is over one of the spanning divs, I (naturally) can't scroll the central div. My question is this: is there a way to ALWAYS have scroll focus on a particular div, no matter where the mouse is located on the page?

EDIT: What I actually have is this:

<div id='wrapper'>
    <nav id='sidebar'></nav>
    <div id='rhs'></div>
</div>

where wrapper and sidebar both have position fixed, and sidebar and rhs are adjacent in the center of wrapper (ie margin: 0 auto; to sit them in the middle). Scrolling with my mouse over either wrapper or sidebar does not scroll rhs, despite the positions being fixed (so Toni Leigh's answer doesn't work for me here).

Answer 1

Yes, you can do this using position: fixed;

The two outer divs are fixed to the screen regardless of scroll position. The the central div scrolls regardless of where the mouse pointer is. You use top and bottom to fix the full height of the screen, then left and right to fix each on either side.

You can still interact with content in the fixed outer divs.

Please see this example

Answer 2

Something like this? Demo

You set the two side divs to be have a position: fixed property and by using top: 0 , left: 0 and right: 0 you can move these into position to the top left and top right respectively.

Then you can have a regular element in the middle. The scroll will now always affect the non-fixed element. (I added a background picture so you can see they don't scroll).

HTML

<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>

CSS

.fixed {
    width: 25%;
    height: 100%;
    background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
    position: fixed;
    top: 0;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.center {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: 5000px;
    background: red;
    line-height: 0;
}