CSS solution to only scroll current div with the mousewheel - not the div behind it.

Question

Consider the following:

Scrolling Div's

Consider the scenario where I have my mouse positioned in div A and I use the mouse wheel to scroll to the bottom or top of divA. When I reach the bottom of div A and keep scrolling with the wheel, it will begin to scroll div B. I would like the mouse wheel to only scroll the current div that the cursor is sitting on.

Is this possible with any standard CSS? Or do I need to wire up JS/jQuery events to detect the div I am currently on and stop the scroll event? I am hoping there is a CSS solution to this.

Thanks in advance for any help!

IIRC, most browsers do this by default. – Bojangles Mar 15 '12 at 14:00 — Bojangles, Mar 15 '12 at 14:00

Hao Long · Answer 1 · 2015-08-01T01:46:51.620

You need this, NO CSS solution:

<script>
$("#div-A").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("div-A").scrollHeight;
var intElemClientHeight = document.getElementById("div-A").clientHeight;
if( intElemScrollHeight - $("#div-A").scrollTop() === intElemClientHeight) {
    $(document).bind("mousewheel", function(event) {
        event.preventDefault();
    });
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
    if($("#div-A").scrollTop() != 0) {
        $(document).unbind("mousewheel"); 
    } else {
        event.preventDefault();
    }
}});
$("#div-A").on("mouseleave", function(event) {
   $(document).unbind("mousewheel");
});
</script>

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

It looks like this is what you need:

How to programmatically disable page scrolling with jQuery

Basically on mouseover you'll disable scrolling for the rest of the page by setting overflow to hidden. And then undo it on mouseout.

Edit: Make sure to handle the case of mouseout, alt+tab then mousemove. You may have to tweak it to make sure they dont get locked out of scrolling with the mouse out of the box.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 15 '12 at 14:07

jholloman

1,959
14
16

Oops, that's what I get for trying to read first thing in the morning, sorry. Though thinking on it, any CSS solution that uses expressions I would avoid for performance. – jholloman Mar 15 '12 at 14:23

score 0 · Accepted Answer · answered Mar 16 '12 at 13:52

0

This doesn't seem possible. I will gladly accept another answer if someone posts one!

answered Mar 16 '12 at 13:52

MattW

12,902
5
38
65

CSS solution to only scroll current div with the mousewheel - not the div behind it.

3 Answers3