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
displaying scrolling bar in .net application
ReplyDeletegreat...!
ReplyDeletegreat...!
ReplyDeleteIn my opinion, great content is above all. So focusing on creating good quality content is the solution.
ReplyDeletemelbourne web designer
Scroll bars do NOT show scroll bars using chrome from Android device (via Chrome) using overflow-y: visible; when I try it.
ReplyDeleteGreat tip, thanks!
ReplyDeleteYou'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.
ReplyDeletehttps://codeprozone.com/code/css/41115/hide-scroll-bar-when-not-needed.html