div要素のスクロールバーをどのように非表示にするか表示しますか？

Question

私はhtml要素上にスクロールバーを表示するこのソリューションを動的に（ホバリング中に）見つけました。

.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キットのブラウザではありません - それは、スクロールバーを使用することは不可能です。あなたは解決策を知っていますか？

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