Reputation: 97
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 (i.e. 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).
Upvotes: 1
Views: 1489
Reputation: 4969
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
Upvotes: 3
Reputation: 59541
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;
}
Upvotes: 2