CODEWITHSUNDEEP
javascriptjqueryeventsscrolljquery-events
Ramon
Ramon

Reputation: 434

Detect if a scroll event is triggered manually in jQuery

This question was already asked here a long time ago:

Detect jquery event trigger by user or call by code

But it has never been answered conclusively (or maybe I'm simply not able to search properly).

Is it possible to detect whether a scroll event has been triggered by the user or by the jQuery animate function?

I am trying to prevent the scroll event to trigger itself while doing something like this:

$(document).scroll(function(){
    $("html").stop(true);
    var number = 400; //some other stuff is happening here
    clearTimeout(tout);
    tout = setTimeout(function(){
        if(top == $(document).scrollTop()){
            $("html").animate({
                scrollTop: (number),
                easing: "easeInQuad",
                duration: 110
            });
        }
    },120);
});

This code seems to be suitable:

$('#scroller').scroll(function(e) {
    if (e.originalEvent) {
        console.log('scroll happen manual scroll');
    } else {
        console.log('scroll happen by call');
    }
});

But the originalEvent object isn't able to detect the animate trigger properly.

Is there any other way to do this?

Upvotes: 16

Views: 36754

Answers (7)

Kabirr singh sahni
Kabirr singh sahni

Reputation: 111

jQuery(document).on('click', 'p.questions__text a[data-clickid="delay_next_delivery"]', function(ele){
    if(ele.originalEvent.isTrusted){
        // human
    } else {
        // non human
    }
});

Upvotes: 1

VipinKundal
VipinKundal

Reputation: 460

If you want to bind with jquery selector and check for event

$('#div.class').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) {
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") {
      // any code
    }
})

Upvotes: 1

SubJunk
SubJunk

Reputation: 312

After attempting to implement the various solutions in this issue I came up with a different approach that is working well for me.

I use a manual boolean for whether an animation is running:

var isRunningAnimation = false;

and set it to true just before animating, and false in the jQuery animate callback function:

  isRunningAnimation = true;

  $('html').animate({
    scrollLeft: 100,
    scrollTop:  100
  }, 400, 'swing', function() {
    isRunningAnimation = false;
  });

and then in the scroll listener just check that boolean:

$('scroll', function() {
  if (!isRunningAnimation) {
    // If we made it to here, the animation isn't running
  }
});

Of course technically if the user decides to manually scroll during the animation, that won't trigger the on scroll logic either, but that seems like enough of an edge case to not worry about.

Upvotes: 3

cwal
cwal

Reputation: 3872

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.

Upvotes: 4

Daniel Tonon
Daniel Tonon

Reputation: 10472

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.

Upvotes: 10

Hitesh Gaur
Hitesh Gaur

Reputation: 360

I would suggest First of all create a javascript function

// Attaching scroll event when document/window is loaded
    function OnFirstLoad() {
        if (document.attachEvent) {
            document.attachEvent('onscroll', scrollEvent);
        } else if (document.addEventListener) {
            document.addEventListener('scroll', scrollEvent, false);
        }

    }

then, use either

        window.onload = OnFirstLoad;

Or

    $(document).ready(function () {
         OnFirstLoad();
    });

In This scroll event is a function

function scrollEvent(e) {
        var body = document.body,
             html = document.documentElement;

        var docHeight = Math.max(body.scrollHeight, body.offsetHeight,
                               html.clientHeight, html.scrollHeight, html.offsetHeight);
        var currentScroll = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        // implement your logic according to requirement

    }

Upvotes: 2

Tony
Tony

Reputation: 7445

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

Upvotes: 24

Related Questions