未設置-webkit-滾動條時：懸停

Question

我使用CSS，直到我在它懸停

（在Firefox和IE工作）懸停在此之前，隱藏滾動條就lookes這樣的：

div#popular-service-container > div:first-child > div::-webkit-scrollbar { 
    /* Safari & Chrome */ 
    display: none; 
} 


div#popular-service-container > div:first-child > div{ 
    overflow-y: auto; 
    overflow-x: hidden; 

    /* IE */ 
    -ms-overflow-style: none; 
    /* Firefox */ 
    overflow: -moz-scrollbars-none; 

    height: calc(100% - 160px); 
    margin-top: 20px; 
    padding-bottom: 20px; 
    font-family: KarlaRegular,arial,sans-serif; 
    font-size: .9em; 
    text-align: left; 

    color: #4d4e50; 

} 

div#popular-service-container > div:first-child > div:hover{ 
    -ms-overflow-style: scrollbar; 
    /* Firefox */ 
    overflow: scroll; 
} 

和在IE/Firefox時，我鼠標移到它顯示像滾動條，以便：

但對Google Chrome瀏覽懸停的代碼（下面的代碼顯示我已分別嘗試過的選項）：

div#popular-service-container > div:first-child > div:hover::-webkit-scrollbar { 
    /* Safari & Chrome */ 
    display: initial; 
    display: unset; 
} 

它留下一個空的滾動條類似的例子：

任何缺少什麼想法？

Answer 1

我認爲這是你想達到的。

div#something { 
 
    height: 200px; 
 
    width: 100px; 
 
    overflow-y:hidden; 
 
} 
 
div#something:hover { 
 
    overflow-y:scroll; 
 
    overflow-x: hidden; 
 
}

<div id="something"> 
 
    <ul> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    <li>list</li> 
 
    </ul> 
 
</div>