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?

Answer 1

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/