How to block/disable scrolling for seconds on page load with jQuery?

Question

I am using this code, for making page scroll down to a class on page load:

    $(function(){
            $('html, body').delay(2000).animate({
                scrollTop: $('.myDiv').offset().top
            }, 2000);
            return false;
        });

When page load, and i scroll contemporary with the animation it conflicts. How can I disable scrolling during the delay - or before the animation starts.

I have searched and found several examples of how to disable scrolling on a click function, but I can't figure out to implement it into my code.

Thank you . I really hope you can help me. Excuse my english.

Answer 1

Hide scrolling on page load by setting overflow to hidden

html, body {
  overflow: hidden;
}

Run a settimeout for 2 seconds and then set overflow to auto and then animate like this

$(function(){
  setTimeout(function(){
    $('html, body')
    .css({
      'overflow': 'auto'
    })
    .animate({
      scrollTop: $('.myDiv').offset().top
    }, 2000);
  }, 2000);
});

Here is a demo

Using delay is fine but its functionality is limited as mentioned in the docs here

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.