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

Ref: http://www.dotnet-tricks.com/Tutorial/css/G348190612-CSS-to-show-only-horizontal-and-vertical-scroll-bar-in-div.html

Comments

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

    melbourne web designer

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

    ReplyDelete
  3. You're definitely familiar with the best coding language CSS that developers use to develop their projects and they get all their queries like "hide scroll bar when not needed" answered properly. Developers are finding an appropriate answer about hide scroll bar when not needed related to the CSS coding language.
    https://codeprozone.com/code/css/41115/hide-scroll-bar-when-not-needed.html

    ReplyDelete

Post a Comment

Popular Posts