CODEWITHSUNDEEP
javascriptjqueryscroll
Jorge
Jorge

Reputation: 5676

jQuery Scroll Timeout

I'm trying to put a delay on page scroll so if I put some animation, it will not ruin. Here is my code:

var lastScrollY = 0,
    delayFlag = true,
    delayTime = 1000;

$(window).on('scroll', function(e) {
    if(delayFlag == true) {
        delayFlag = false;
        var posY = $(this).scrollTop(),
            sectionH = $('.page').height(),
            multiplier = (Math.round(lastScrollY / sectionH));

        if(lastScrollY > posY) {
            $(window).scrollTop((multiplier - 1) * sectionH);
        }
        else {
            $(window).scrollTop((multiplier + 1) * sectionH);
        }

        lastScrollY = posY;

        setTimeout(function() { delayFlag = true }, delayTime);
    }
    else {
        e.preventDefault();
    }
});

jQuery preventDefault() is not working. Is there any way I can put some delay on scroll event?

Upvotes: 0

Views: 1606

Answers (2)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

While I wouldn't recommend this, from a UX perspective (personally, I hate pages that stop me from going someplace in the site, just so I have to watch their ad or whathaveyou, and I'm fairly sure I'm not the only one...), what you might be able to do, rather than capture the scroll event, is turn off scrolling for the area to start with.

So, have something along these lines (example jsFiddle: http://jsfiddle.net/mori57/cmLun/):

In CSS: 

.noscroll {
    overflow:hidden;
}

And in your JS:

var lastScrollY = 0,
    delayFlag = true,
    delayTime = 1000;

$(function(){
   $("body").addClass("noscroll"); 

    window.setTimeout(function(){
        $("body").removeClass("noscroll");
    }, delayTime );
});

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83358

e.preventDefault(); is for preventing the default action of an event. For example, clicking on an anchor will cause the page to navigate to the address stored on the anchor's href, and calling e.preventDefault(); in an anchor's click event will cause this navigation to not happen.

e.preventDefault(); does not, however, cancel the event that just occurred. Calling it in the onchange event of a form input will not revert its value back to what it just was, and calling it in the scroll event will not cancel the scroll.

Upvotes: 2

Related Questions