CODEWITHSUNDEEP
javascriptjquery
tehSUPERADMIN
tehSUPERADMIN

Reputation: 279

jQuery - Scroll Function Keeps Triggering: Only Once Please

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?

Upvotes: 7

Views: 11712

Answers (1)

Ram
Ram

Reputation: 144659

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/

Upvotes: 16

Related Questions