Check how much unused CSS you have on your website:

Check Now

Quick & free. No signup needed.

You Might Also Be Interested In

• Improving Perceived Speed With Critical CSS
• Why You Need A Faster Website

Hide Scrollbar in CSS

The real estate on the user’s screen is limited. Developing content for a wide web audience, you will encounter the challenge of handling content that overflows. One possible solution is to allow scrolling for overflowing content but without displaying scrollbars for aesthetic reasons. The CSS property `overflow: hidden;` is not the solution to this problem as it prevents scrolling yet still crops the content. We need a solution to hide the scrollbar while still allowing scrolling.

There are various solutions out there on the web with their limitations. This article demonstrates a less hacky solution with cross-browser compatibility for Edge, Chrome, Firefox, and Safari (as of writing this article).

Let’s build a small, fixed-size container hosting a large text.

<div class="container">
  <p>
     Pellentesque eu elit sodales, accumsan leo in, maximus felis. Praesent nec fermentum massa. Pellentesque rutrum nunc ac tempus aliquam. Pellentesque porta arcu nibh, et tristique ipsum congue at. Donec venenatis elit eu ornare rhoncus. Maecenas vel aliquam odio. Phasellus at mi ullamcorper, cursus urna tempus, rhoncus nulla. Vivamus velit enim, feugiat vel elementum sed, feugiat in magna. Proin eu fringilla mauris. Praesent faucibus congue velit, quis bibendum libero dapibus tempus. Proin rhoncus nisl quis rutrum accumsan. Nam non ultricies quam, nec venenatis nisi. Suspendisse aliquam fermentum arcu. Sed nunc nibh, tempus vitae mi sed, hendrerit auctor nisl. Duis viverra elit in nisl egestas, et interdum eros sollicitudin. Integer ut lobort.Pellentesque eu elit sodales, accumsan leo in, maximus felis. Praesent nec fermentum massa. Pellentesque rutrum nunc ac tempus aliquam. Pellentesque porta arcu nibh, et tristique ipsum congue at. Donec venenatis elit eu ornare rhoncus. Maecenas vel aliquam odio. Phasellus at mi ullamcorper, cursus urna tempus, rhoncus nulla. Vivamus velit enim, feugiat vel elementum sed, feugiat in magna. Proin eu fringilla mauris. Praesent faucibus congue velit, quis bibendum libero dapibus tempus. Proin rhoncus nisl quis rutrum accumsan. Nam non ultricies quam, nec venenatis nisi. Suspendisse aliquam fermentum arcu. Sed nunc nibh, tempus vitae mi sed, hendrerit auctor nisl. Duis viverra elit in nisl egestas, et interdum eros sollicitudin. Integer ut lobort
 </p>
</div>

.container {
  width: 500px;
  height: 250px;
  overflow: scroll;
}

As you can see - with overflow-scroll CSS declaration, users can scroll to view the overflowing content but with a visible scrollbar. Let’s hide the scrollbar with the following CSS rules:

.container {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

And the scrollbar is be gone but you can still scroll. You can see all of it together in the following codepen.

<div class="container">
  <p>
    Pellentesque eu elit sodales, accumsan leo in, maximus felis. Praesent nec fermentum massa. Pellentesque rutrum nunc ac tempus aliquam. Pellentesque porta arcu nibh, et tristique ipsum congue at. Donec venenatis elit eu ornare rhoncus. Maecenas vel aliquam odio. Phasellus at mi ullamcorper, cursus urna tempus, rhoncus nulla. Vivamus velit enim, feugiat vel elementum sed, feugiat in magna. Proin eu fringilla mauris. Praesent faucibus congue velit, quis bibendum libero dapibus tempus. Proin rhoncus nisl quis rutrum accumsan. Nam non ultricies quam, nec venenatis nisi. Suspendisse aliquam fermentum arcu. Sed nunc nibh, tempus vitae mi sed, hendrerit auctor nisl. Duis viverra elit in nisl egestas, et interdum eros sollicitudin. Integer ut lobort.Pellentesque eu elit sodales, accumsan leo in, maximus felis. Praesent nec fermentum massa. Pellentesque rutrum nunc ac tempus aliquam. Pellentesque porta arcu nibh, et tristique ipsum congue at. Donec venenatis elit eu ornare rhoncus. Maecenas vel aliquam odio. Phasellus at mi ullamcorper, cursus urna tempus, rhoncus nulla. Vivamus velit enim, feugiat vel elementum sed, feugiat in magna. Proin eu fringilla mauris. Praesent faucibus congue velit, quis bibendum libero dapibus tempus. Proin rhoncus nisl quis rutrum accumsan. Nam non ultricies quam, nec venenatis nisi. Suspendisse aliquam fermentum arcu. Sed nunc nibh, tempus vitae mi sed, hendrerit auctor nisl. Duis viverra elit in nisl egestas, et interdum eros sollicitudin. Integer ut lobort
  </p>
</div>

* { font-family: sans-serif; }

body {
  padding: 16px;
}

.container {
  width: 35vw;
  height: 250px;
  margin: auto;
  padding: 0 16px;
  background-color: #48abe0;
  color: white;
  border-radius: 4px;
  text-align: justify;
  box-shadow: 0 5px 5px 5px rgba(0,0,0,0.2);
  overflow: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

Note: This and other such solutions should be used very carefully as it defeats the purpose of scrollbars. Scrollbars inform the user they have more content to view, where they are on the page, and enable using the mouse to drag and click on the scroll bar if they wish. With the scrollbars hidden, all these facilities will be gone.

Conclusion

For aesthetic reasons, you may need to allow content to scroll without the scrollbar visibility. This article has demonstrated a less hacky and cross-browser method of achieving it.

UnusedCSS helps website owners remove their unused CSS every day. Sign Up to see how much you could remove.

You Might Also Be Interested In

• Accessible CSS-Only Hamburger Menu
• Improving Perceived Speed With Critical CSS

• ← Round Buttons
• CSS Background Slider →