hide scrollbar and show on hover like facebook's new chat sidebar
Here is an update to Stephen P.'s post to have a styled scroll bar.
http://jsfiddle.net/PVZB8/139/
-Mike
Facebook's horizontal scrollbar in ticker & chat sidebar
jQuery UI actually has a nice little slider plugin that you can style anyway you like. Take a look at the demo here:
http://jqueryui.com/demos/slider/side-scroll.html
Main plugin page:
http://jqueryui.com/demos/slider/#side-scroll
Another awesome plugin that i've used on a now-dead site is this one:
http://jscrollpane.kelvinluck.com/basic.html
Make scrollbars only visible when a Div is hovered over?
div {
height: 100px;
width: 50%;
margin: 0 auto;
overflow: hidden;
}
div:hover {
overflow-y: scroll;
}
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
How do I make the scrollbar on a div only visible when necessary?
Use overflow: auto
. Scrollbars will only appear when needed.
(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto
and overflow-y: auto
).
Showing scrollbars only when mouseover div
You can make overflow hidden until the mouse is over it, then make it auto.
This is what I did ... note the 16px padding assumes a scrollbar is 16px wide, and is there so the text doesn't re-wrap when the scrollbar appears.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
See it in action at this fiddle - you'll want to widen the right side "result" window to see the whole box, or reduce the width in the css.
Edit 2014-10-23
There is now more variation in how systems and browsers display scrollbars, so my 16px
space may need to be adjusted for your case. The intent of that padding is to prevent the text from being re-flowed as the scrollbar appears and disappears.
Some systems, such as newer versions of Mac OS X (10.8.x at least), don't show scrollbars until you start scrolling which could throw this whole technique off. If the scrollbar doesn't show you may have no reason to hide it until hover, or you may want to leave overflow as auto
or even scroll
rather than toggling it.
Scrollbar onMouseOver
This is relatively simple, just have overflow: hidden
then on :hover
make overflow-y
: scroll;
Fiddle
Related Topics
CSS Hover VS. JavaScript Mouseover
How to Add Anything in <Head> Through Jquery/Javascript
How to Use the Spacing Utility Classes in Bootstrap
Scrollintoview() Causing the Whole Page to Move
Jquery Drag/Resize with CSS Transform Scale
Check Browser CSS Property Support with JavaScript
Leaflet Map Not Displayed Properly Inside Tabbed Panel
How to Access the Value of Invalid/Custom CSS Properties from JavaScript
Read CSS Property of an Element Using JavaScript
Black and White Text Based on Background Image with CSS
Padding or Margin Value in Pixels as Integer Using Jquery
Programmatically Changing Webkit-Transformation Values in Animation Rules
Jquery Event That Triggers After CSS Is Loaded
Get the Scale Value of an Element