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)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/

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

3 个答案: