How dynamically hiding or showing scrollbar on div elements?

Question

I've found this solution for dynamically (while hovering) showing a scrollbar on html-elements.

    .scrollbox {
     width: 10em;
     height: 10em;
     overflow: auto;
     visibility: hidden;
    }
    .scrollbox-content,
    .scrollbox:hover {
     visibility: visible;
    }

     <h2>Hover it</h2>
     <div class="scrollbox">
      <div class="scrollbox-content">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 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!
      </div>
     </div>

While this is working well in firefox and IE it doesn't in web-kit-browsers - it's impossible to use the scrollbar. Do you know a solution?

Try using [`-webkit-scrollbar`](https://css-tricks.com/examples/WebKitScrollbars/) in WebKit browsers. — yaakov, Feb 13 '17 at 16:23
related question.. http://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div — CommonKnowledge, Feb 13 '17 at 16:26

score 0 · Accepted Answer · answered Feb 14 '17 at 10:18

TricksfortheWeb gave the right hint - it's not an option to define a custom scrollbar in WebKit browsers, it's required. You have to add some CSS-selectors, for instance:

div::-webkit-scrollbar {
  width: 13px;
}
div::-webkit-scrollbar-track {
 background: #DDD;
}
div::-webkit-scrollbar-thumb {
 background: #BBB;
}
div::-webkit-scrollbar-thumb:hover {
 background: #999;
}
div::-webkit-scrollbar-thumb:active {
 background: #777;
}

div::-webkit-scrollbar-button {
 background: #DDD;
 width: 13px;
 height: 13px;
}
div::-webkit-scrollbar-button:vertical:decrement {
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAQAAAClB0z9AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg4JMDvqT6KMAAAAIElEQVQI12NgwAr+QyhGJA4jAwMTlMMIoRnhHLgGJAAA8YoGAjR+UnEAAAAASUVORK5CYII=');
 background-repeat: no-repeat;
 background-position: 3px 3px;
}
div::-webkit-scrollbar-button:vertical:increment {
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAQAAAClB0z9AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg4JMSB5MVohAAAAJ0lEQVQI12NgQAGMDP8ZGBgYGRgYGBj+M0Cp/zASWZwRoek/AzYAAJSyB/2cvV19AAAAAElFTkSuQmCC');
 background-repeat: no-repeat;
 background-position: 3px 3px;
}

How dynamically hiding or showing scrollbar on div elements?

1 Answers1