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

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

• javascript
• jquery
• css

• Does the content overflow the page such that overflow: auto would produce scrollbars? – BoltClock Commented Sep 11, 2013 at 17:54
• Maybe this would e to help stackoverflow./questions/8189840/… – Itay Commented Sep 11, 2013 at 17:56

2 Answers 2

Try using jQuery mousewheel https://github./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/.

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()