Monday, May 6, 2013

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
   overflow: auto; /*for horizontal and vertical scroll bars */

Horizontal Scroll Bar
       overflow-x: auto; /*for horizontal scroll bar */
       overflow-y: hidden; /*for hiding vertical scroll bar */

Vertical Scroll Bar
   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".



  1. In my opinion, great content is above all. So focusing on creating good quality content is the solution.

    melbourne web designer

  2. Scroll bars do NOT show scroll bars using chrome from Android device (via Chrome) using overflow-y: visible; when I try it.