How To Hide Disabled Horizontal or Vertical Scrollbar through CSS?

Disabled horizontal or vertical scrollbars in the web pages will look awkward. It is better to hide those unused scrollbars instead of showing it unnecessarily. This can be achieved through cascading style sheet (css). It is possible to forcibly hide either the horizontal or the vertical scrollbars.

To show vertical scrollbar and hide horizontal scrollbar, add the below lines to the css class:
overflow-x: hidden;
overflow: auto;

To show horizontal scrollbar and hide vertical scrollbar, add the below lines to the css class:
overflow-y: hidden;
overflow: auto;

Example:
.hideverticalscroll
{
width: 100%;
height: 400px;
overflow-y: hidden;
overflow: auto;
font-family:Verdana;
font-size:12px;
}

In the above css class, we have forcibly hide the vertical scrollbar by mentioning as ‘overflow-y:hidden’. Then the line as ‘overflow:auto’ is to enable the horizontal scrollbar if only needed.

Post New Tips/Tricks

View all Tips/Tricks

Featured Resources:

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks - Free 158 Page Preview

Get the most out of this complete question-and-answer book on JavaScript.

Oracle Magazine

Contains technology strategy articles, sample code, tips, Oracle and partner news, how to articles for developers and DBAs, and more.

100% Free Subscription until Stock lost.View complete list.