Question

我想将滚动条宽度更宽，因此当用户将鼠标悬停在其上时看起来很清晰。

所以我写道：

::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}

背景颜色变为红色，但不是宽度，无论如何都要解决这个问题？这是plnkr

Answer 1

*:hover::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

这将更改任何元素滚动条的宽度和高度。如果您想更具体一点，只需将“ *”交换为您选择的选择器即可。例如，将其应用于“ my-custom-scrollbar”类的元素的滚动条：

.my-custom-scrollbar:hover::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}

Answer 2

这是我使用 mousemove 事件的解决方法：

document.addEventListener("mousemove", function(e){
    let ele = document.getElementById('element');
    let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
    distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});

和样式是

#element::-webkit-scrollbar-thumb {
  background: #888; 
}
#element::-webkit-scrollbar {
    width: 5px;
}
#element.more-width::-webkit-scrollbar {
    width: 10px;
}

codepen 示例：https://codepen.io/KhaleD_D/pen/OJpgJKM

如何在悬停在其上时更改-webkit-scrollbar width

2 个答案: