DEV Community

Paul C. Ishaili
Paul C. Ishaili

Posted on

5 1

Hide Scrollbar view while scrolling feature is enabled - CSS

There are times, in web development, when it is important to add finishing touches to website or web apps, such as hiding the scrollbar view while scrolling feature is still enabled on such element or component.

This article is a quick but an effective tip on how to go about it, in CSS or SCSS or SASS.

Let's say the component that needs the scrollbar to be hidden is not neccessarily the overall body of the page, but an element in the body that has it's content overflowing. Let's say the component has a className of overflowed-content.

Then we will need to do our styling magic with the classname in css:

.overflowed-content {
   overflow-y:scroll
   scrollbar-width: none;
}

.overflowed-content::-webkit-scrollbar{
   display: none;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay