我使用教程在网站上尝试视差,一切正常,除了视差元素内有一个滚动条。身体没有边距。
我无法通过查看这里的其他帖子找到答案。
视差CSS
body {
margin: 0;
overflow-x: hidden;
font-family: 'body-reg';
}
.row {
width: 100%;
}
* {
box-sizing: border-box;
}
.B1 {
height: calc(100vh - 20px);
min-height: 300px;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 10px;
perspective: 10px;
}
.B1 .container--parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.B1 .container--parallax .background {
transform: translateZ(-10px) scale(2);
}
.B1 .container--parallax .foreground {
transform: translateZ(-5px) scale(1.5);
}
.B1 .container--parallax .background,
.B1 .container--parallax .foreground {
display: block;
position: absolute;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: -1;
}
HTML
<body>
<main>
<section class="row B1">
<div class="container--parallax">
<img src="/assets/images/background.png" alt="Background" class="background">
<img src="/assets/images/foreground.png" alt="Foreground" class="foreground">
</div>
<section class="row B2">
<!-- add content -->
</section>
</section>
<section class="row B3">
<!-- more content -->
</section>
</main>
</body>
下面的正文的用途与此无关,但没有应用任何样式。
.B1 里面不应该有滚动条,那为什么会有呢?
尝试使用这个!
.B1 {
-ms-overflow-style: none;
scrollbar-width: none;
}
.B1::-webkit-scrollbar {
display: none;
}