如何在鼠标悬停时增加滚动条宽度

时间：2021-02-19 04:09:14

标签： javascript html css

我正在尝试使用以下代码增加我的身体滚动条宽度。

    <body class="expanScrollWidth">
<div>My page Content</div>
</body>

我尝试使用下面的 CSS 类来做到这一点

.expanScrollWidth::-webkit-scrollbar:hover{
    width: 20px !important;
}

我的第二次努力

  body::-webkit-scrollbar:hover{
    width: 20px !important;
}

两者都不起作用。你能帮我做这个吗。

3 个答案:

答案 0 :(得分：2)

它应该可以工作

div {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    background-color: blue;
}

/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

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


::-webkit-scrollbar-thumb {
    background-color: red;
}
::-webkit-scrollbar-thumb:hover {
    background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
    width: 40px;
    /*background-color: red !important;*/
}

::-webkit-scrollbar-track-piece {
    /*background-color: #efefef;*/
}

::-webkit-scrollbar-thumb:vertical {
    /*background-color: #666;*/
}

<div><img src="http://placehold.it/500x500" /></div>

答案 1 :(得分：1)

使用::-webkit-scrollbar-thumb:hover

答案 2 :(得分：1)

试试这个：

::-webkit-scrollbar-thumb:hover {
  width: 20px;
}