Question

我发现这个动态（悬停时）的解决方案在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>

虽然这在firefox和IE中运行良好但它不适用于web-kit-browsers - 但是不可能使用滚动条。你知道解决方案吗？

Answer 1

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

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

1 个答案: