javascript - 如何隐藏预加载器屏幕上的滚动条?
问题描述
我想隐藏y-axis
预加载器屏幕上的滚动条。
正如你在最右边看到的,我想在我的预加载器屏幕上隐藏那个滚动条。为此,我需要overflow-y: hidden;
在preloader css
? 我试过这样做,但它仍然没有用。
这是预加载器的代码:
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(2000).fadeOut('slow');
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: rgb(1, 36, 133);
}
.svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 2s linear infinite;
}
.svg-file.z-logo svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #044d77;
}
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: rgb(5, 46, 80);
width: 8px;
height: 5px;
}
@keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #05f7f9;
}
80% {
stroke-width: 0;
fill: #05f7f9;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
#preloader {
position: fixed;
z-index: 9999;
overflow: hidden;
background: white;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
.z-logo svg {
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
display: flex;
width: 50%;
}
.z-logo::before {
content: "";
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
background: black;
position: absolute;
display: inline-flex;
border: 1px solid black;
width: 200px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="preloader">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
<g id="H">
<path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"
fill="#47AF9A" />
</g>
</svg>
</div>
</div>
在上面的代码中我应该在哪里添加overflow-y: hidden;
,我厌倦了将它添加到主*{
,但它隐藏了我整个网站的 y 轴滚动条,但我只想隐藏预加载器屏幕。
解决方案
您需要从页面正文中删除溢出,以便无法滚动任何内容。
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(2000).fadeOut('slow');
document.body.style.overflowY = "hidden"; // remove overflow from body
$('body').addClass('preload_active'); // add preload_active class
}
});
如果使用该addClass
选项,那么您将需要
.preload_active {
overflow-y: hidden;
}
在你的 CSS 中。
不过,您将需要一些东西来删除隐藏的值。你也可以在 body 中添加一个类,并在 CSS 中声明overflow-y: hidden
这个类。同样,您将需要一些逻辑来在preloader.length === 0
.
推荐阅读
- django - 在单个选项卡中运行多个微服务
- java - Itext PDF 无法正确显示缅甸 Unicode 字体
- docker - 使用 docker 使用 gitlab 的本地 ci 管道
- javascript - 从父组件更新子组件道具反应原生
- scala - Scala:像数组一样的多实例
- javascript - 如果随机生成的数字在 Javascript 中是不受欢迎的数字,我该如何重新生成?
- javascript - 使用 Axios ReactJS 的多个 API 请求
- node.js - Nodemailer 24小时发送限制
- java - 如何决定应该抛出多少个异常?
- flutter - 如何在颤振中使用多个提供者