CSS tricks to show or hide horizontal and vertical scroll bar

CSS tricks to show or hide horizontal and vertical scroll bar

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 */
}

Horizontal Scroll Bar

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

Vertical Scroll Bar

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

Important to remember:

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".