Detect scrolling attempts in overflow:hidden page?

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

Answers:

Answer

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/.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.