How to change -webkit-scrollbar width when hover on it

Question

I want to change the scrollbar width wider, so it looks clear when user hover on it.

So I wrote:

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

The background color changed to red, but not the width, Is there anyway to solve this? Here is plnkr

Answer 1

You can achieve that by using border instead of width:

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #ababab;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box; // <== make the border work
}

::-webkit-scrollbar-thumb:hover{
    border: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

Answer 2

This solution uses scrollbar which is natively 16px large, but we show only 6px to make it thinner (and leave more space for content). But the trick is overflow: overlay which allows content to be displayed even over scrollbar area.

Using this approach you have thin scrollbar which enlarges on hover (and the hover are is a bit wider).

I got inspired by Khaled's solution, but I used CSS only approach:

.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);
}

Answer 3

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

This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':

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

Answer 4

this is a workaround I used using mousemove event:

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');
});

and styling would be

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

codepen sample: https://codepen.io/KhaleD_D/pen/OJpgJKM