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>

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.

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

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

---

Related Topics