47

I'm creating a scrolling effect using JQuery and I'm wondering if it's possible to distinguish between the user scrolling vs. programmatically scrolling.

I have something like this:

$('#element').on('scroll',function(e){
    $('#element').stop(true); // stop previous scrolling animation
    $('#element').animate({ // start new scrolling animation (maybe different speed, different direction, etc)
        scrollTop:...
    });
});

However, this event is triggered during every step of the animation. How can I tell if this event was triggered by the user or by the animation?

5
  • You are looking for event.originalEvent, see event object documentation under Other properties and this fiddle for an example. Commented Aug 1, 2015 at 2:03
  • stackoverflow.com/questions/1659204/…
    – FuzzyTree
    Commented Aug 2, 2015 at 0:43
  • You could try distinguishing it with the wheel event. A user can fire both wheel and scroll events, whereas jQuery probably only fires the scroll event. Commented Aug 6, 2015 at 4:02
  • 1
    Instead of trying to determine the source of the scroll event, unsubscribe from the event before animate (after stop) and subscribe to scroll event again after animate. Commented Aug 7, 2015 at 10:10
  • @AdamMoszczyński The user must be able to stop the scroll animation by scrolling.
    – Leo Jiang
    Commented Aug 7, 2015 at 12:28

3 Answers 3

5

Use a variable to determine when you are scrolling programmatically

Example:

var programScrolling = false;

$('#element').on('scroll',function(e){
    if (programScrolling) {
        return;
    }

    $('#element').stop(true); // stop scrolling animation

    programScrolling = true;

    $('#element').animate({
        scrollTop:...
    });

    programScrolling = false;
});

Not sure if that is exactly what you want, but the concept should work.

8
  • 1
    The user should be able to interrupt the scrolling animation at any time (hence the $('#element').stop(true)). This would make it such the user cannot interrupt the animation.
    – Leo Jiang
    Commented Jul 17, 2015 at 2:34
  • @Linksku Would putting the $('#element').stop(true) inside the if condition work for your scenario? Commented Jul 17, 2015 at 2:43
  • 1
    No because then the animation would stop after 1 step. I also just noticed that the conditional's body will never be run because programScrolling will always be false.
    – Leo Jiang
    Commented Jul 17, 2015 at 2:51
  • This may help stackoverflow.com/questions/9144560/… Commented Jul 17, 2015 at 3:05
  • 4
    This answer is incorrect. $('#element').animate(...) will start the animation but it will return before the animation has completed because an animation is an asynchronous process. It does not block. So programScrolling = false; will execute before the animation is over.
    – Louis
    Commented Sep 21, 2015 at 22:48
4

I would make functions for different kinds of scrollings to detect them and call a scroll handler for all of them, like so:

JS Fiddle

$(window).bind('mousewheel DOMMouseScroll', function(event){
    var direction;
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        direction = 'up';
    }
    else {
        direction = 'down';
    }
    scrollHandler(direction, 'mouseWheel');
    event.preventDefault();
});

var scrollHandler = function(direction, origin) {
    var height = $(document).scrollTop();
    var movement = (direction == 'up') ? -100 : 100;
    console.log(origin);
    $('body').stop(true);
    $('body').animate({
        scrollTop: height + movement
    }, 250);
};

Then you can do different stuff according to the origin of the event!
You could also check if the user scrolls to the same direction that the screen is scrolling and do something different, or whatever you want with the info passed by the mousewheel event.

Original mousewheel event function copied from THIS answer

4
  • mousewheel has limited support. Also, it doesn't work if the user scrolls using the scrollbar or on mobile.
    – Leo Jiang
    Commented Aug 7, 2015 at 1:46
  • Thats why I used mousewheel DOMMouseScroll', it applies to IE9+ and all major browsers. You can also make a $('body').on('touchmove', function(e) { and pass to the smoothScroll function whatever you like, direction, origin.. You could also leave the native scrolling for mobile.
    – Aramil Rey
    Commented Aug 7, 2015 at 1:53
  • You could also add onmousewheel to the function catching the event to support IE8 and below
    – Aramil Rey
    Commented Aug 7, 2015 at 1:56
  • There is no mouse on touch screens! Commented Jul 28, 2021 at 23:55
-1
+100

I would suggest possibly using the .originalEvent method. The downside is, this is very browser dependent. See here. Hopefully the following helps:

$('#element').scroll(function(e){
    var humanScroll = e.originalEvent === undefined;
    if(humanScroll) {
        $(this).stop(true);
    }
})
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.