Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 877
Markus Jönsson Avatar asked Dec 04 '11 20:12

Markus Jönsson


People also ask

Does overflow hidden prevent scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.

Does scrollIntoView trigger scroll event?

scrollIntoView does not trigger mousewheel nor scroll event in Angular. Bookmark this question.


2 Answers

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   } }); 
like image 109
anson Avatar answered Sep 20 '22 14:09

anson


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

like image 38
maxedison Avatar answered Sep 17 '22 14:09

maxedison