如何动态隐藏或显示div元素上的滚动条？

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?

Answer 1

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;
}