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

Question

我想将滚动条宽度更改得更宽，以便用户将鼠标悬停在其上时看起来很清晰。

所以我写道：

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

背景颜色变为红色，但不是宽度，有没有办法解决这个问题？这是 plnkr

原文由 Allen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此解决方案使用原生 16px 大的滚动条，但我们仅显示 6px 以使其更薄（并为内容留出更多空间）。但诀窍是 overflow: overlay 它甚至可以在滚动条区域上显示内容。

使用这种方法，您有一个细滚动条，它在悬停时会放大（并且悬停有点宽）。

我受到 Khaled 的解决方案的启发，但我只使用了 CSS 方法：

 .custom-scrollbar {
    scrollbar-color: var(--gray) var(--secondary);
    scrollbar-width: thin;
    overflow: overlay !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-track-piece  {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(to left, var(--gray) 6px, transparent 0%);
}

.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(to bottom, var(--gray) 6px, transparent 0%);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--gray);
}

原文由 michal.jakubeczy 发布，翻译遵循 CC BY-SA 4.0 许可协议