如何摆脱 CSS 中的双垂直滚动条？

Question

我通过这样做添加了滚动效果：

 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; 但这导致滚动效果停止工作。 我是编码新手，因此非常感谢任何帮助！

Answer 1

将以下代码添加到您的 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;
  }
}

Answer 2

当内容大于窗口时，滚动条可见。 您可以小幅降低 .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>

Answer 3

如果您希望某个项目成为屏幕的最大高度，请使用min-height: 100vh; 相反height: 100vh;

这将设置最小高度等于您的屏幕高度，但如果内容需要更多的垂直空间，它将让父元素增长到足以匹配子元素的需要。

顺便说一下，在这种情况下，您不需要为父元素 (.container) 设置min-height和height ，因为默认情况下它会增长以匹配其子元素（部分）的高度总和。

 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;你的第二个滚动条就会在那里overflow-y: scroll; 因为它就是这样做的，所以我建议您避免使用它，除非出于设计原因，例如本网站“使用”部分中的项目： https : //joelbonetr.com/