Make scrollbars only visible when a Div is hovered over

Question

I am trying to figure out how to have a scrollable div that only shows its scrollbars when Hovered     Example is Google Image search  in the image below you can see how the left sidebar does not appear to be scroll-able until you hover the mouse over it   Is this possible with CSS or is Javascript required   If possible maybe a quick example how to do such a task

User · Answer

This will work    div       max-height 300px       overflow hidden     div hover       overflow-y scroll

User · Answer

Give the div a fixed height and srcoll hidden  and on hover change the scroll to auto    test scroll  height 300px  overflow hidden    test scroll hover overflow-y auto     Here is an example  http   jsfiddle net Lywpk

User · Answer

x000D   x000D  div   x000D    height  100px  x000D    width  50   x000D    margin  0 auto  x000D    overflow  hidden  x000D    x000D   x000D  div hover   x000D    overflow-y  scroll  x000D    x000D   lt div gt  x000D     lt p gt 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 x000D      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 x000D      publishing software like Aldus PageMaker including versions of Lorem Ipsum  x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Would something like that work

User · Answer

If you are only concern about showing hiding  this code would work just fine       leftDiv   hover function     this  css  overflow   scroll     function     this  css  overflow   hidden         However  it might modify some elements in your design  in case you are using width 100   considering that when you hide the scrollbar  it creates a little bit of more room for your width

User · Answer

The answer with changing overflow have a bunch of issues  like inconsistent width of the inner block and triggering of reflow   There is an easier way to have the same effect that would not trigger reflow ever  using visibility property and nested blocks    x000D   x000D   scrollbox   x000D    width  10em  x000D    height  10em  x000D    overflow  auto  x000D    visibility  hidden  x000D    x000D   x000D   scrollbox-content  x000D   scrollbox hover  x000D   scrollbox focus   x000D    visibility  visible  x000D    x000D   x000D   scrollbox delayed   x000D    transition  visibility 0 2s  x000D    x000D   x000D   scrollbox delayed hover   x000D    transition  visibility 0s 0 2s  x000D    x000D   lt h2 gt Hover it lt  h2 gt  x000D   lt div class  scrollbox  tabindex  0  gt  x000D     lt div class  scrollbox-content  gt Hover me  Lorem ipsum dolor sit amet  consectetur adipisicing elit  Facere velit  repellat voluptas ipsa impedit fugiat voluptatibus  Facilis deleniti  nihil voluptate perspiciatis iure adipisci magni  nisi suscipit aliquam  quam  et excepturi  Lorem x000D      ipsum dolor sit amet  consectetur adipisicing elit  Facere velit  repellat voluptas ipsa impedit fugiat voluptatibus  Facilis deleniti  nihil voluptate perspiciatis iure adipisci magni  nisi suscipit aliquam  quam  et excepturi  lt  div gt  x000D   lt  div gt  x000D   x000D   lt h2 gt With delay lt  h2 gt  x000D   lt div class  scrollbox scrollbox delayed  tabindex  0  gt  x000D     lt div class  scrollbox-content  gt Hover me  Lorem ipsum dolor sit amet  consectetur adipisicing elit  Facere velit  repellat voluptas ipsa impedit fugiat voluptatibus  Facilis deleniti  nihil voluptate perspiciatis iure adipisci magni  nisi suscipit aliquam  quam  et excepturi  Lorem x000D      ipsum dolor sit amet  consectetur adipisicing elit  Facere velit  repellat voluptas ipsa impedit fugiat voluptatibus  Facilis deleniti  nihil voluptate perspiciatis iure adipisci magni  nisi suscipit aliquam  quam  et excepturi  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Another feature of this method is that visibility is animatable  so we can add a transition to it  see the second example in the pen above   Adding a transition would be better for UX  the scrollbar won t appear immediately when hovered just while moving along to another element  and it would be harder to miss the scrollbar when targeting it with mouse cursor  as it won t hide immediately as well

User · Answer

One trick for this  for webkit browsers  is to create an invisible scrollbar  and then make it appear on hover  This method does not affect the scrolling area width as the space needed for the scrollbar is already there   Something like this     x000D   x000D  body   x000D    height  500px  x000D     amp   -webkit-scrollbar   x000D      background-color  transparent  x000D      width  10px  x000D      x000D     amp   -webkit-scrollbar-thumb   x000D      background-color  transparent  x000D      x000D    x000D   x000D  body hover   x000D     amp   -webkit-scrollbar-thumb   x000D      background-color  black  x000D      x000D    x000D   x000D   full-width   x000D    width  100   x000D    background  blue  x000D    padding  30px  x000D    color  white  x000D    x000D  some content here x000D   x000D   lt div class  full-width  gt does not change lt  div gt  x000D   x000D   x000D

User · Answer

This will help you to overcome overflow  overlay issues as well   div        height  300px        overflow  auto        visibility  hidden          div-content   div hover     visibility  visible

User · Answer

I think something like      leftDiv   mouseover function     this  css  overflow   scroll           leftDiv   mouseout function     this  css  overflow   hidden

User · Answer

div  -webkit-scrollbar-thumb       background  transparent      div hover  -webkit-scrollbar-thumb       background  red

User · Answer

Answer by  Calvin Froedge is the shortest answer but have an issue also mentioned by  kizu  Due to inconsistent width of the div the div will flick on hover  To solve this issue add minus margin to the right on hover    div         overflow hidden       height whatever px      div hover         overflow-y scroll        margin-right  -15px     adjust according to scrollbar width

[css] Make scrollbars only visible when a Div is hovered over?

Examples related to css