Please enable Javascript to correctly display the contents on Dot Net Tricks!

CSS to show only horizontal and vertical scroll bar in div

  Author : Shailendra Chauhan
Posted On : 19 Jun 2012
Total Views : 42,003   
Updated On : 14 Jul 2012
 

Sometimes we need to add scroll bar to a div or span whenever text in the div or span get overflow. scroll bar is supported in all browsers like IE 5+, FF 3.5+, and Safari, Opera etc. To show scroll bar, we need to specify overflow property of css to "visible" or "auto".

Horizontal and vertical scroll bar

 .scrollbar
{
overflow: auto; /*for horizontal and vertical scroll bars */
}
/* or you can set scrolling in x and y direction */
.scrollbarxy
{
overflow-x: auto; /*for horizontal scroll bar */
overflow-y: auto; /*for vertical scroll bar */
} 

Only, Horizontal scroll bar

 /* Show only horizontal scrollbar */
.hscrollbar
{
overflow-x: auto; /*for horizontal scroll bar */
overflow-y: hidden; /*for hiding vertical scroll bar */
} 

Only, Vertical scroll bar

 /* Show only vertical scrollbar */
.vscrollbar
{
overflow-x: hidden; /*for hiding horizontal scroll bar*/
overflow-y: auto; /*for vertical scroll bar*/
} 

Note

  1. To show scroll bar always set overflow to "visible". It will show scroll bar whether text get overflow or not.

  2. To show scroll bar only, when text get overflowed, set overflow property to "auto".

Summary

In this article I try to explain, how you can scroll overflow text in div or span using css. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.



Free Interview Books
 
COMMENTS (0)
3 AUG
ASP.NET Core with Angular4 Development (Online)

07:00 AM - 9:00 AM IST(+5:30 GMT)

Know More
29 JUL
Angular2 and Angular4 Development (Online)

08:00 AM - 10:00 AM IST(+5.30 GMT)

Know More
29 JUL
ASP.NET MVC with Angular4 Development (Classroom)

09:30 AM - 11:00 AM IST (+5:30GMT)

Know More
29 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

09:00 AM - 11:00 AM IST(+5:30 GMT)

Know More
26 JUL
ASP.NET MVC with Angular4 Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

Know More
22 JUL
MEAN Stack 2 Development (Classroom)

04:00 PM - 05:30 PM IST(+5:30GMT)

20 JUL
Hadoop Development cum Administration (Online)

07:00 AM - 09:00 AM IST(+5:30 GMT)

17 JUL
NodeJS with Angular4 Development (Online)

08:00 PM - 09:30 PM IST(+5.30 GMT)

15 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM - 05:30 PM IST(+5.30 GMT)

1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

08:00 AM - 09:30 AM IST

1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM - 12:30 PM IST(+5:30 GMT)

30 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

09:30 PM - 11:00PM IST(+5:30GMT)

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

20 MAY
NodeJS with Angular4 Development (Classroom)

05:00 PM - 07:00 PM

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST(+5.30 GMT)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+