How To Hide Scrollbar Using CSS?

Web browsers provide scrollbars in order to navigate long web pages horizontally or vertically. Even though they are useful for navigation times we may need to hide the scroll bar for different website themes etc. The CSS can be used to hide scrollbars and we examine how to hide scrollbars using CSS in this tutorial.

Hide Horizontal Scrollbar

The horizontal scrollbar configuration is stored with the overflow-x CSS attribute. We can set the overflow-x value as hidden to hide the horizontal scrollbar.

body {
   overflow-x: hidden;
}

Hide Vertical Scrollbar

We can hide the vertical scrollbar using the CSS overflow-y attribute. The overflow-y attribute is set as hidden like below.

body {
   overflow-y: hidden;
}

Hide All Scrollbars

We can hide both vertical and horizontal scrollbars or all scrollbars by setting the overflow attribute as hidden .

body {
   overflow: hidden;
}

Leave a Comment