我通过这样做添加了滚动效果:
section {
background: #1d1c1c;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
<div class="container">
<section class="about">
<div class="about-container">
<h1>about</h1>
</div>
</section>
<section class="projects">
<div class="project-container ">
<h1>projects</h1>
</div>
</section>
<section class="contact">
<div class="contact-container">
<h1>contact</h1>
</div>
</section>
</div>
它起作用了,但出现了第二个滚动条。我尝试使用 overflow-y: scroll hidden;
但这导致滚动效果停止工作。我是编码新手,因此非常感谢任何帮助!
答案 0 :(得分:0)
将以下代码添加到您的 CSS
.container::-webkit-scrollbar {
width: 0!important; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.container::-webkit-scrollbar-thumb {
background: transparent; /* Optional: just make scrollbar thumb invisible */
}
@-moz-document url-prefix() {
.container {
scrollbar-width: none;
scrollbar-color: transparent;
}
}
答案 1 :(得分:0)
滚动条可见,当内容大于窗口时。您可以小幅减少 .container 高度以删除第二个滚动条:
section {
background: #1d1c1c;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 95vh; /* CHANGED */
}
<div class="container">
<section class="about">
<div class="about-container">
<h1>about</h1>
</div>
</section>
<section class="projects">
<div class="project-container">
<h1>projects</h1>
</div>
</section>
<section class="contact">
<div class="contact-container">
<h1>contact</h1>
</div>
</section>
</div>
答案 2 :(得分:0)
如果您希望某个项目成为屏幕的最大高度,请使用 min-height: 100vh;
代替 height: 100vh;
这会将最小高度设置为等于您的屏幕高度,但如果内容需要更多的垂直空间,它将让父元素增长到足以匹配子元素的需要。
顺便说一下,在这种情况下,您不需要为父元素 (.container) 设置 min-height
或 height
,因为它会增长以匹配其子元素的总和(section)s 高度默认。
section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.about {
background: chocolate;
}
.projects {
background: burlywood;
}
.contact {
background: bisque;
}
<div class="container">
<section class=" about ">
<div class="about-container ">
<h1>about</h1>
</div>
</section>
<section class="projects ">
<div class="project-container ">
<h1>projects</h1>
</div>
</section>
<section class="contact ">
<div class="contact-container ">
<h1>contact</h1>
</div>
</section>
</div>
如果您使用 overflow-y: scroll;
,那么您的第二个滚动条就会在那里,因为它就是这样做的,所以我建议您避免使用它,除非出于设计原因(例如“使用”部分中的项目)本网站:https://joelbonetr.com/