Menu
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
795
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
Use overflow-x : scroll and overflow-y : hidden , or overflow: scroll hidden instead. Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead.
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content.
The difference For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not. So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.
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/.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
