Detect if a scroll event is triggered manually in jQuery
I don't know how well this works with touch screen devices but this works for me on desktop at least
$(window).on('mousewheel', function(){
//code that will only fire on manual scroll input
});
$(window).scroll(function(){
//code that will fire on both mouse scroll and code based scroll
});
I don't think there is a way to only target the animated scroll (the accepted answer didn't work for me).
UPDATE: Warning!
Unfortunately, 'mousewheel'
doesn't seem to pick up on users who manually grab the scroll bar and drag it or users who use the scroll bar arrow buttons :(
This still works ok for touch screen devices as their swipes seem to count as mouse scrolls. This isn't a great solution for desktop users though.
Using @Tony's accepted answer and @DanielTonon's comment I came up with the following solution:
var animatedScroll = false;
var lastAnimatedScroll = false;
$(window).scroll(function(event){
lastAnimatedScroll = animatedScroll;
animatedScroll = $('html, body').is(':animated');
});
This seems to solve the issue mentioned whereby jquery removes the .is(':animated')
then scrolls one more pixel, which leads to .is(':animated')
ending on a false. By storing the second to last version of .is(':animated')
you can be (more) sure whether or not the scroll was an animated one or not.
When you want to know if the scroll was animated or not just check the lastAnimatedScroll
variable.
This has NOT been thoroughly tested by me but has been correct on many page refreshes so I will assume it works well enough.
Maybe :animated
selector will help you:
$('#scroller').scroll(function(e) {
if ($(this).is(':animated')) {
console.log('scroll happen by animate');
} else if (e.originalEvent) {
// scroll happen manual scroll
console.log('scroll happen manual scroll');
} else {
// scroll happen by call
console.log('scroll happen by call');
}
});
Demo