当用户悬停在滚动条上时如何增加滚动条的宽度

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.要求：当用户悬停在 div 上时，只需要显示滚动条，当用户悬停在滚动条上时，滚动条宽度必须从 5px 增加到 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.我做了什么：我创建了自定义滚动条并在 div 上实现了 hover，但是当用户 hover 在滚动条上我无法增加它的大小时，我面临着问题。

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

<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: css 代码：

*::-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应用程序 url：https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css

instead of increased width and applying color it is just applying color而不是增加宽度和应用颜色它只是应用颜色

Answer 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>

Answer 2

You didn't set it to 15px in the first place.你一开始并没有将它设置为 15px。

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

Answer 3

The ::-webkit-scrollbar element is non-standard (Not compatible with Firefox). ::-webkit-scrollbar元素是非标准的（与 Firefox 不兼容）。

In any case it looks like it can't be done with CSS alone.在任何情况下，它看起来都不能单独使用 CSS 来完成。

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!在这里找到了一种可能的方法以及一个博客和一个github 链接，以（希望）补偿不包括内联代码！

当用户悬停在滚动条上时如何增加滚动条的宽度

问题描述

3 个解决方案

解决方案1
10 已采纳 2022-03-22 06:53:43

解决方案2
2 2022-03-15 10:46:51

解决方案3
0 2022-03-26 18:48:34

当用户悬停在滚动条上时如何增加滚动条的宽度

问题描述

3 个解决方案

解决方案1 10 已采纳 2022-03-22 06:53:43

解决方案2 2 2022-03-15 10:46:51

解决方案3 0 2022-03-26 18:48:34

解决方案1
10 已采纳 2022-03-22 06:53:43

解决方案2
2 2022-03-15 10:46:51

解决方案3
0 2022-03-26 18:48:34