Showing Scrollbars Only When Mouseover Div

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.

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

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

Javascript - How to make scrollbar only visible when you move your mouse inside respective div

The code below acts as you have requested, it enables overflow-y: scroll; on the mousemove trigger, and disables it automatically after 3 seconds. I have used setTimeout to begin the countdown, adding each new countdown to an array and clearing it as necessary (so only the most recent is active).

There is some explanation if you run the snippet.

Let me know if you needed something else.

// Create array for setTimeoutsvar timeouts = [];
$(".hover-scroll").mousemove(function() {
  // Add class that enables scroll  $(this).addClass("show-scroll");
  // Clear all setTimeouts  for (var i = 0; i < timeouts.length; i++) {    clearTimeout(timeouts[i]);  }
  // Start a new setTimeout to disable scoll after 3 seconds  timeouts.push(setTimeout(hideScroll, 3000));
});

function hideScroll() {
  // Disable scroll in ALL divs with .hover-scroll  $(".hover-scroll.show-scroll").removeClass("show-scroll");
}

.hover-scroll {  overflow: hidden;  height: 50px;  border: 5px solid red;  padding: 4px;}
.show-scroll {  overflow-y: scroll;  border-color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>How do you know I work?</strong></p><p>If you move your mouse over the div below then you wil be able to scroll. If you wait for 3 seconds then the scroll will no longer work. Remember, if you move your mouse it will re-enable. If the border is red you cannot scroll, when it is green then scroll is enabled.</p>
<div class="hover-scroll">  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque quis nunc in rutrum. Aenean vel ultrices justo. Etiam convallis, nisi id aliquet ultrices, sem magna sagittis arcu, ac mollis purus elit sed enim. Pellentesque semper, massa    quis porttitor rhoncus, ex ante suscipit urna, non faucibus enim nisi sit amet libero. Etiam tincidunt quam et neque faucibus egestas. Aenean porta ipsum nisi, id pellentesque urna sodales auctor. Nam eleifend, tellus ac vehicula sagittis, justo metus    laoreet diam, eu efficitur sem purus eget nisi. Nullam id nunc mattis, lobortis sem consectetur, hendrerit purus. Maecenas sem dui, vulputate non leo id, viverra consectetur nisl. Nunc viverra mollis ipsum quis congue. Donec at lobortis mauris. Quisque    quis malesuada orci. Nulla eu tristique turpis. Maecenas vestibulum, ante eget volutpat egestas, urna quam fringilla felis, sed vestibulum turpis dolor ut magna. Cras sed sem nisl. Nam dignissim faucibus mi, non semper nunc dapibus at.</p></div>