gpt4 book ai didi

jquery - 使用加载覆盖时隐藏内容/滚动条?

转载 作者:行者123 更新时间:2023-11-27 23:10:29 26 4
gpt4 key购买 nike

我的网站在后台加载时使用加载叠加层。但是,滚动条仍然显示,这意味着访问者可以去任何地方,如果网站完成加载,访问者将不会从顶部看到该网站。所以,我想隐藏它,不允许访问者滚动。

enter image description here

这是我的代码:

CSS:

#load {
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}

HTML/jQuery:

<html>
<head></head>
<body>
<div id="load">
Loading...
</div>
<script>
jQuery(window).load(function(){
jQuery('#load').fadeOut();
});
</script>
<div class= ...
</body>
</html>

<div class= ...表示网站实际内容的开始。

最佳答案

给您一个解决方案 https://jsfiddle.net/rfaa3hcr/

$('body').css({
overflow: 'hidden'
});
setTimeout(function(){
$('#load').fadeOut('slow', function(){
$('body').css({
overflow: 'auto'
});
});
}, 5000);
#load {
position: fixed;
height: 100vh;
overflow: hidden;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
text-align: center;
background: green;
color: #fff;
padding-top:25%;
}

body{
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
Loading...
</div>

CSS changes: height: 100vh instead of 100% and added overflow: hidden; Body with 1000px to showcase your problem.

JavaScript changes: Initially overflow:hidden set to body using jQuery. Used setTimeout to showcase the fixed of problem & then after 5sec fadeout the load & show overflow as auto.

希望对您有所帮助。

关于jquery - 使用加载覆盖时隐藏内容/滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46283600/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com