CODEWITHSUNDEEP
javascriptjquery
Dancer
Dancer

Reputation: 17651

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).

I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?

Upvotes: 2

Views: 4012

Answers (4)

Ludovic Guillaume
Ludovic Guillaume

Reputation: 3287

If you want to fade in when all images are loaded, you can try this

var images = $('img');
var images_nbr = images.length;

images.load(function() {
    images_nbr--;

    if (images_nbr == 0) {
        $('body').css('overflow','auto');
        $('...').fadeIn();
    }
});

Upvotes: 2

Sudip
Sudip

Reputation: 2051

You can try like, initially add the below css on body

body {overflow:hidden;}

and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like

$('body').css('overflow','auto');

Upvotes: 0

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3955

.scrolldiv{
overflow:hidden;
}

$(window).load(function(){
   $(".scrolldiv").css("overflow","auto");
});

Upvotes: 0

AmericanUmlaut
AmericanUmlaut

Reputation: 2837

Set

#mydiv {
    overflow:hidden 
}

in your parent div in CSS. Then, in your document, add this...

$('#mydiv').css('overflow', 'auto');

...in the function that fades in your content.

Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.

Upvotes: 0

Related Questions