禁用页面滚动直到页面加载 – JQuery

我为客户网站构建了一个视差滚动介绍 – 该网站包含许多高分辨率图像 – 所以我创建了一个快速加载器，用全屏高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

组

 #mydiv { overflow:hidden } 

在CSS的父div中。 然后，在您的文档中，添加此…

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

…在淡入您内容的function中。

因此，在加载时页面将不可滚动，但是当您淡入时，溢出属性将被覆盖并允许内容滚动。

Answer 3

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

Answer 4

你可以尝试，最初在身体上添加下面的CSS

 body {overflow:hidden;} 

并且在setInterval函数完成执行后（无论你的加载函数如何）只需从body中删除样式，如

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