javascript - 禁用页面滚动直到页面加载 - JQuery

Question

我为客户网站构建了一个视差滚动介绍 - 该网站包含许多高分辨率图像 - 所以我创建了一个快速加载器，它使用全屏高 z-index div 将屏幕空白，然后使用 setTimeout 方法淡入文档准备好后 4 秒的页面（不确定这是否是最好的方法，但它适用于我尝试过的每个测试）。

我想禁用滚动以防止用户在动画出现之前滚动动画 - 谁能推荐一个好的跨浏览器方法来做到这一点？

Answer 1

如果你想在加载所有图像时淡入，你可以试试这个

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

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

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

Answer 2

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.

Answer 3

.scrolldiv{
overflow:hidden;
}

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

Answer 4

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');