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

Question

I added a scroll effect by doing this:

 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>

it worked but a second scroll bar showed up. I tried using overflow-y: scroll hidden; but that caused the scroll effect to stop working. I am new to coding so any help would be very much appreciated!

Answer 1

Add The following code to your 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

Scrollbar is visible, when content is bigger than window. You can small decrease .container height to remove second scrollbar:

 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

If you want an item to be the maximum height of your screen, use min-height: 100vh; instead height: 100vh;

This will set the minimum height equals to your screen height but if the content needs more vertical space, it will let the parent element to grow enough to match the child element needs.

By the way in this case you don't need to set neither a min-height nor height to the parent element (.container), because it will grow to match the sum of its child elements (section)s height by default.

 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>

And your second scrollbar will be there if you use overflow-y: scroll; because it's what it does, so I would suggest you to avoid using it unless it's necessary for design reasons such the items inside the "working with" section of this site: https://joelbonetr.com/