Skype 滚动条的 CSS

Question

我正在尝试实现我们在 SKYPE 中使用的滚动条设计，即 1.未悬停在div中时隐藏， 2. 鼠标悬停在 div 内时可见 3. 鼠标悬停在滚动条上时宽度增加。

第 1 点和第 2 点适用于以下 CSS：

div {
    overflow: hidden;
}

    div:hover {
        overflow: auto;
    }

但第 3 点不起作用，我正在尝试将 increase scrollbar width 从 5px 变为 15px：

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
 ::-webkit-scrollbar:hover {
        width: 15px;
        height: 15px;
}

这是所需的设计： Scrollbar_Increase_Width.PNG 任何帮助将不胜感激。

Answer 1

不要使用下面的代码

::-webkit-scrollbar {         /* Remove this line */
    width: 5px;               /* Remove this line */
    height: 5px;              /* Remove this line */
}                             /* Remove this line */

只用这个

 ::-webkit-scrollbar:hover {
        width: 15px;
        height: 15px;
}