unset -webkit-scrollbar in：hover

Question

我使用css隐藏滚动条，直到我将鼠标悬停在它上面（使用Firefox和IE浏览器）

在悬停之前它看起来像这样：

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中，当我将鼠标悬停在它上面时会显示滚动条：

但是使用Chrome悬停代码（下面的代码显示了我单独尝试过的选项）：

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

它会留下一个空的滚动条，例如：

关于缺少什么的任何想法？

Answer 1

我认为这就是你想要实现的目标。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;