DEV Community

Paul C. Ishaili
Paul C. Ishaili

Posted on

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)