AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 How To Hide Disabled Horizontal or Vertical Scrollbar through CSS?
Posted by Moderator1 on  6/3/2009 11:09:33 AM 21257 Views
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:
Web Application Security — How to Minimize Prevalent Risk of Attacks
Vulnerabilities in web applications are now the largest vector of enterprise security attacks.
Many .NET teams are underperforming, is yours?
Explore how you can turn your .NET developer training program from a commonly ignored budget line-item into a strategic weapon in today's competitive software environment.
100% Free Subscription until Stock lost.View complete list.
Sponsored by