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

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

enter image description here

javascripthtmlcsscss-selectors


Solution 1:[1]

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>

Solution 2:[2]

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

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

Solution 3:[3]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rohit Verma
Solution 2 codingmaster398
Solution 3

Related Questions