The CSS solution is to only scroll the current div with the mouse wheel, not the div behind it.

Consider the following:

Scrolling div's

Consider a scenario where my mouse is positioned in div A and I use the mouse wheel to scroll to the bottom or top of divA . When I get to the bottom of the div A , and continue to scroll wheel, it will start scrolling div Bed and . 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 bind JS / jQuery events to detect the div I'm currently on and stop the scroll event? I hope there is a CSS solution for this.

Thanks in advance for your help!

+3


source to share


3 answers


This is not possible. I would happily accept another answer if someone sends it!



0


source


It looks like this is what you need:

How to programmatically disable page scrolling using jQuery



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

Edit: Don't forget to handle the case of mouseout, alt + tab, then mousemove. You may need to tweak it to make sure they aren't locked out of scrolling with your mouse out of the box.

0


source


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>  

      

0


source







All Articles