How can I make the entire HTML document scroll when the mouse is hovering over a specific DIV?

Question

My page contains two vertical DIVS: nav_div and content_div. My CSS looks like this:

#nav_div{ 
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    position: fixed;
    top: 0; 
    left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

What I want to accomplish: make the entire page scroll vertically WITH THE MOUSEWHEEL if the mouse is hovering over nav_div

All browsers should support vertical scrolling with the mousewheel regardless of the content of the page. Do you mean that you only want content_div to scroll, not nav_div? Please clarify. — radiaph, Mar 15 '15 at 22:37
exactly... i thought my CSS was showing that. nav_div should NEVER scroll, while content_div should ALWAYS scroll... with the mouse wheel of course, regardless of where the mouse pointer is — Chris Giesler, Mar 15 '15 at 22:41

score 1 · Answer 1 · answered Mar 15 '15 at 22:06

1

This won't work with pure html/css. You need javascript to accomplish what you want. You can find a jQuery example here: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

answered Mar 15 '15 at 22:06

Mario A

3,286
1
17
22

What exactly doesn't work? Please provide a jsfiddle or at least share some code. – Mario A Mar 16 '15 at 07:06

score 0 · Answer 2 · answered Mar 16 '15 at 01:23

If you want nav_div to remain stationary, it is the one that should have position:fixed:

#nav_div{ 
    position: fixed;
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    position: absolute;
    top: 0; 
    left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

Alternatively:

#nav_div{ 
    position: fixed;
    width: 300px; 
    height: 100%;
    overflow: hidden;
}

#content_div{
    margin-left: 300px;
    overflow: auto; 
    padding: 0px 0 0 0;
}

How can I make the entire HTML document scroll when the mouse is hovering over a specific DIV?

2 Answers2