How to increase width of the scroll bar when user hover's on it

Question

Hi I am having issue with my custom scroll

requirement : when ever user hovers on to a div then only scroll bar has to be shown and when user hover's on scroll bar then the scroll bar width has to increase from 5px to 15px.

what i did : i created custom scroll bar and implemented hover on div and but im facing issue when user hover on scrollbar i unable to increase it size.

*::-webkit-scrollbar-thumb:hover {
  background-color: blue;
  border: 1px;
  width: 15px;
}

 *::-webkit-scrollbar:hover {

  width: 15px;
}





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

below is my code

.html

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class="table">
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
      Hello<br />
    </div>
  </body>
</html>

css code :

*::-webkit-scrollbar {
  width: 5px;
  border: 1px;
}

*::-webkit-scrollbar-track {
  background: #ebf0f5;
}

*::-webkit-scrollbar-thumb {
  background-color: black;
  border: 1px;
}

*::-webkit-scrollbar-thumb:hover {
  width: 15px;
}

.table {
  position: relative;
  left: 150px;
  top: 150px;
  width: 200px;
  max-height: 200px;
  background-color: rgba(255, 0, 0, 0.55);
  overflow: hidden;
}

.table:hover {
  overflow-y: auto;
  scroll-behavior: smooth;
}

app url : https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css

instead of increased width and applying color it is just applying color

I hope this will help you. [https://css-tricks.com/almanac/properties/s/scrollbar-width/](https://css-tricks.com/almanac/properties/s/scrollbar-width/) — Asif Sharif Shahid, Mar 15 '22 at 11:13
What do you mean by "when ever user logs on to a div"? What user action on the div are you talking about? — the Hutt, Mar 20 '22 at 13:42
@theHutt hover's on to div and u can the check the stack blitz which i created — Madpop, Mar 21 '22 at 03:57
Is it ok to use Javascript? CSS only solution seems not possible, because `::-webkit-scrollbar` doesn't respect `:hover` pseudo class. — the Hutt, Mar 21 '22 at 04:58

score 11 · Accepted Answer · answered Mar 22 '22 at 06:53

Try This:-

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 {
     position: relative;
     left: 150px;
     top: 150px;
     width: 200px;
     max-height: 200px;
     background-color: rgba(255, 0, 0, 0.55);
     overflow: auto;
}
 #element::-webkit-scrollbar-thumb {
     background: #888;
}
 #element::-webkit-scrollbar {
     width: 5px;
}
 #element.more-width::-webkit-scrollbar {
     width: 20px;
}

<div id="element">
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
</div>

+1 I was thinking the same! But you'll have to do more handling. If I move cursor outside the red box above the scrollbar the scrollbar still expands. You need to attach the event to the element and not document. Also need to handle mouseout or mouseleave event to remove the `more-width` class. — the Hutt, Mar 22 '22 at 07:54

score 2 · Answer 2 · answered Mar 15 '22 at 10:46

2

You didn't set it to 15px in the first place.

*::-webkit-scrollbar-thumb:hover {
  background-color: blue;
  border: 1px;
  width: 15px;
}

answered Mar 15 '22 at 10:46

codingmaster398

249
4
14

I already applied https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css – Madpop Mar 15 '22 at 10:48
@Madpop It seems to work for me, I'm on mobile at the moment though. – codingmaster398 Mar 15 '22 at 10:51
@Madpop You copied it, but didn't delete the one directly in front of it. You have two CSS statements of "*::-webkit-scrollbar-thumb:hover {". Delete the second one. – codingmaster398 Mar 15 '22 at 10:53
i tried and updated the code too https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css and it is not working – Madpop Mar 15 '22 at 10:56
@Madpop Maybe try something here? https://stackoverflow.com/a/19171215/12359120 I'm on my phone right now so I'm sorry that I can't help to the fullest extent. – codingmaster398 Mar 15 '22 at 11:01

Ravindra HV · Answer 3 · 2022-03-26T18:57:57.607

0

The ::-webkit-scrollbar element is non-standard (Not compatible with Firefox).

In any case it looks like it can't be done with CSS alone.

Consequently you may be better off looking at a re-write.

Found a possible approach here as well as a blog and a github-link to (hopefully) compensate for not including the code inline!

edited Mar 26 '22 at 18:57

answered Mar 26 '22 at 18:48

Ravindra HV

2,558
1
17
26

How to increase width of the scroll bar when user hover's on it

3 Answers3