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

I think chrome blocks it, I tried here, and I just can increase the width with a hover in the div, or in another element with position absolute (but if the element is above the scroll you'll not be able to scroll by dragging) — SpaceDogCS, Jan 29 '18 at 16:17
But, -webkit-scrollbar is just for webkit browsers, in mozilla it will look different, I recommend you to use a jquery plugin, so you'll be able to stylize too — SpaceDogCS, Jan 29 '18 at 16:17
try this one http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html — SpaceDogCS, Jan 29 '18 at 16:18
@SpaceDogCS Thanks your advice, It's my personal project, so I just want to implement it under chrome. — Allen, Jan 31 '18 at 15:27
@RishabhSrivastava try `div:hover::-webkit-scrollbar` it only apply on div, It work when hover on div — Allen, Mar 14 '19 at 09:38

score 14 · Answer 1 · edited Nov 24 '21 at 03:23

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

score 13 · Answer 2 · answered Sep 02 '19 at 15:36

13

*: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;
}

answered Sep 02 '19 at 15:36

Fredrik_Borgstrom

2,504
25
32

2

It will change the container's width and height. – Naeem Baghi Nov 08 '20 at 10:28
22

this works when mouse on the div with scrolled. What I am looking for is to not enlarge while mouse on the div, but on the scrollbar only. – efirat Nov 14 '20 at 18:40

Khaled D · Answer 3 · 2021-05-25T09:29:21.930

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

edited May 25 '21 at 09:29

answered May 25 '21 at 08:00

Khaled D

41
3

2

Anything for horizontal scroll ? – Sachin Dongare Sep 15 '21 at 06:51
3

Too heavy to bind mouse move event – Pranjal jaju Oct 12 '21 at 10:10

score 1 · Answer 4 · edited Oct 14 '22 at 14:15

I use following code to achieve increase width on hover effect. Sadly, its working on Chrome and Edge only. My apologies for incorrect formatting.

* { 
    &::-webkit-scrollbar-thumb {
        border: 5px solid transparent;
        border-radius: 10px;
        background-color: grey;
        background-clip: content-box;
       -webkit-background-clip: content-box;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: black;
        background-clip: border-box;
       -webkit-background-clip: border-box;
    }

    &::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        background-color: transparent;
    }
}

score 1 · Answer 5 · answered Mar 03 '22 at 08:05

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

Note that CanIUse states that `overflow: overlay;` is being deprecated and replaced with `scrollbar-gutter`. See: https://caniuse.com/css-overflow-overlay — Eliezer Berlin, Apr 07 '22 at 06:49

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

5 Answers5

Linked