CODEWITHSUNDEEP
javascriptjqueryjquery-events
Markus Jönsson
Markus Jönsson

Reputation: 655

Catch scrolling event on overflow:hidden element

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.

Upvotes: 40

Views: 34947

Answers (6)

Ashu Sharma
Ashu Sharma

Reputation: 1

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.

Upvotes: 0

Frizzant
Frizzant

Reputation: 768

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.

Upvotes: 2

Nebulosar
Nebulosar

Reputation: 1855

$("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>

Upvotes: 1

anson
anson

Reputation: 4164

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
  }
});

Upvotes: 35

Neil
Neil

Reputation: 81

$("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?

Upvotes: 4

maxedison
maxedison

Reputation: 17553

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

Upvotes: 3

Related Questions