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

我发现这个解决方案可以动态（在悬停时）显示html元素上的滚动条

.scrollbox{
宽度：10em；
高度：10公分；
溢出：自动；
可见性：隐藏；
}
.滚动框内容，
.滚动框：悬停{
能见度：可见；
}

将其悬停
Lorem ipsum dolor sit amet，
阿迪皮斯精英。面颊、面颊、面颊
阻止fugiat volupatibus。面神经缺失
马格尼（magni）、尼西（nisi suscipit aliquam）、奎姆（quam）等
例外！Lorem ipsum dolor sit amet，奉献精英。
面颊平直，上唇赘肉和下唇赘肉阻碍上唇赘肉。
面部去角质化，无皱褶，
尼西·苏西皮特·阿利夸姆，阿利夸姆，特普图里！

TricksfortheWeb给出了正确的提示-在WebKit浏览器中，它不是定义自定义滚动条的选项，而是必需的。 您必须添加一些CSS选择器，例如：

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

尝试在WebKit浏览器中使用。相关问题。。