Menu
You can apply scrollbar-width: none to the container div. This will hide the scrollbar altogether.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
I have run into an issue on webkit browsers (IE and FF are ok) where the scrollbar space is reserved for an element even though the scrollbar is not showing. You can see in the example that once the middle one is hovered the scrollbar space is still reserved. I am just wondering if this an issue with Chrome or just part of the HTML/CSS spec. This similar question provides a fix but it doesn't explain if it is a bug or not and having to set an explicit width on the children is not what I want to do.
.hidden-scroll {
background: black;
overflow-y: hidden;
height: 400px;
width: 300px;
}
.hidden-scroll:hover {
overflow-y: auto;
}
.no-hover.hidden-scroll:hover {
overflow-y: hidden;
}
.hidden-scroll-content {
background: red;
height: 50px;
}<body>
<div>No scroll needed</div>
<div class="hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
</div>
<div>Scroll on hover</div>
<div class="hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
<div class="hidden-scroll-content">5</div>
<div class="hidden-scroll-content">6</div>
<div class="hidden-scroll-content">7</div>
<div class="hidden-scroll-content">8</div>
<div class="hidden-scroll-content">9</div>
<div class="hidden-scroll-content">10</div>
<div class="hidden-scroll-content">11</div>
<div class="hidden-scroll-content">12</div>
</div>
<div>No scroll on hover</div>
<div class="no-hover hidden-scroll">
<div class="hidden-scroll-content">1</div>
<div class="hidden-scroll-content">2</div>
<div class="hidden-scroll-content">3</div>
<div class="hidden-scroll-content">4</div>
<div class="hidden-scroll-content">5</div>
<div class="hidden-scroll-content">6</div>
<div class="hidden-scroll-content">7</div>
<div class="hidden-scroll-content">8</div>
<div class="hidden-scroll-content">9</div>
<div class="hidden-scroll-content">10</div>
<div class="hidden-scroll-content">11</div>
<div class="hidden-scroll-content">12</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With