jQuery - Scroll Function Keeps Triggering: Only Once Please

Question

I have the following jQuery function which triggers aTestEvent() when the user scrolls horizontally past 500 pixels:

jQuery(document).scroll(function(){
    if(jQuery(this).scrollLeft() >= 500){
           aTestEvent();
 }});

Here's the issue: I only want aTestEvent() to be triggered once! However, every time the user scrolls back to the beginning of the page and then again past 500 pixels, aTestEvent() is triggered again.

How can we adjust the above code so that the trigger only occurs for the first time the user scrolls past 500 pixels?

shekhardtu · Accepted Answer · 2016-02-22 11:44:34Z

16

You can use on and off methods:

$(document).on('scroll', function() {
    if( $(this).scrollLeft() >= 500 ) {
        $(document).off('scroll');
        aTestEvent();
    }
});

http://jsfiddle.net/3kacd/

Please Note: This code snippet could "off" all the scroll event available on a particular page but to scroll off only intended scroll handler without disturbing other scroll handlers, we can use a namespace. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match.

$(document).on('name1.scroll', function() {
    if( $(this).scrollLeft() >= 500 ) {
        $(document).off('name1.scroll');
        aTestEvent();
    }
});

http://jsfiddle.net/shekhardtu/3kacd/57/

edited Feb 22, 2016 at 11:44

shekhardtu

5,4508 gold badges32 silver badges39 bronze badges

answered May 28, 2013 at 2:00

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tehSUPERADMIN Over a year ago

That does the trick! Thank you very much. Will accept once I can.

Don McCurdy Over a year ago

Another handy trick is the lesser-known .one() method. api.jquery.com/one Very useful every once in a while, but it wouldn't technically work for this because of the if() statement - it would only fire once, even if the if condition was false.

raam86 Over a year ago

@undefined why did you put .off before the event?

Ram Over a year ago

@raam86 off unbinds the handler registered by on method, as OP wants to stop listening to the event I have used off.

raam86 Over a year ago

of course. but why not: console.log('aTestEvent'); $(document).off('scroll'); So it turns off after the event is fired. This is genuine intrigue

|

Collectives™ on Stack Overflow

jQuery - Scroll Function Keeps Triggering: Only Once Please

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related