8

I want to detect when the user is trying to scroll up or down on my page, but since I don't want to allow the actual scrolling I have set an overflow:hidden body. The code is something like this:

$('html,body').css('overflow','hidden');
$(window).scroll(function(event){
    console.log("scroll");
});

The problem is that since there is no actual scrolling I cannot fire the event, I have thought about removing the overflow style and somehow preventing scrolls but I cannot figure out how to do it.

Anyway is there a way to fix the scrolling while detecting scrolling attempts? Thanks

lisovaccaro
  • 32,502
  • 98
  • 258
  • 410
  • Does the content overflow the page such that `overflow: auto` would produce scrollbars? – BoltClock Sep 11 '13 at 17:54
  • Maybe this would come to help http://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery – Itay Sep 11 '13 at 17:56

2 Answers2

4

Try using jQuery mousewheel https://github.com/brandonaaron/jquery-mousewheel. You can detect the mousewheel movement. The other option is to not set the overflow to hidden but instead catch the scroll attempt and scroll them yourself. There are also a bunch of libraries for JS scrolling, I like http://manos.malihu.gr/jquery-custom-content-scroller/.

CWitty
  • 4,488
  • 3
  • 23
  • 40
2

Here's a jQuery-solution. 

$(document).bind('mousewheel', function(e) {
    var delta = e.originalEvent.wheelDelta;
    console.log('The mouse delta is : ' + delta);
});

jQuery Doc - .bind()

Zachary Dahan
  • 1,419
  • 16
  • 26