Catch scrolling event on overflow:hidden element

Question

Any insights on how to catch a scrolling event on a element that has overflow:hidden? I would like to scroll in a column without showing a scrollbar to the user.

Answer 1

This is actually a somewhat indepth process. What I do is set global flags when users mouse enters and leaves the element that you want to scroll. Then, on the mousewheel event for the body I check to see if the MOUSE_OVER flag is true, then stop propagation of the event. This is so the main body doesnt scroll in case your entire page has overflow.

Note that with overflow hidden, the default scrolling ability is lost so you must create it yourself. To do this you can set a mousewheel listener on your div in question and use the event.wheelDelta property to check whether the user is scrolling up or down. This value is different according to browser, but it is generally negative if scrolling down and positive if scrolling up. You can then change position of your div accordingly.

This code is hacked up quickly but it would essentially look like this...

var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });

$('#myDiv').bind('mousewheel', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});

Answer 2

$("body").css("overflow", "hidden")

$(document).bind('mousewheel', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

works for me. adapted from How do I get the wheelDelta property?

Answer 3

I use overflow:scroll, but also Absolutely position a div over the scroll bar in order to hide it.

Answer 4

I edited @anson s answer to Vanilla Javascript since it may be useful for others. Also note that "mousewheel" event is deprecated. So my code uses "wheel" instead. Next to that I added arrow functions for practical access the to "this".

fixScrollBehavior(elem) {
                elem.addEventListener('scroll', (e) => {
                    console.log('scrolling');
                });

                let MOUSE_OVER = false;
                elem.addEventListener('wheel', (e) => {
                    if (MOUSE_OVER) {
                        if (e.preventDefault) {
                            e.preventDefault();
                        }
                        e.returnValue = false;
                        return false;
                    }
                });

                elem.addEventListener('mouseenter', () => {
                    MOUSE_OVER = true;
                });
                elem.addEventListener('mouseleave', () => {
                    MOUSE_OVER = false;
                });

                elem.addEventListener('wheel', (e) => {
                    let delta = e.wheelDelta;
                    if (delta > 0) {
                        //go up
                    } else {
                        //go down
                    }
                });
            }

Note that this does not fix the mobile touch-"scroll"s.

Answer 5

$("div").on('wheel', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

This did the trick for me. JSFiddle

StackFiddle:

$("div").on('wheel', function(e) {
  if (e.originalEvent.deltaY < 0) {
    console.log("Scroll up");
  } else {
    console.log("Scroll down");
  }
});

div {
  height: 50px;
  width: 300px;
  background-color: black;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

Answer 6

I am late, but I think I have a better answer.

Style your container as overflow: overlay, this will free up space of scrollbar, then style scrollbar or hide it or make its handle height/width 0,

Then you should get scroll events also.

Note : styling the scrollbar is not supported in all web browsers.