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

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

您好,我的自定义滚动条有问题

要求: 当用户悬停在 div 上时,仅需显示滚动条,当用户悬停在滚动条上时,滚动条宽度为从 5px 增加到 15px。

我做了什么: 我创建了自定义滚动条并在 div 上实现了悬停,但是当用户悬停在滚动条上时我遇到了问题我无法增加它的大小。

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

 *::-webkit-scrollbar:hover {

  width: 15px;
}





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

下面是我的代码

.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代码:

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

应用程序 url : https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css

它只是应用颜色而不是增加宽度和应用颜色

你一开始没有设置成15px。

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

试试这个:-

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>

::-webkit-scrollbar 元素是 non-standard(与 Firefox 不兼容)。

无论如何,仅靠 CSS 似乎无法完成。

因此,您最好还是看看 re-write。

找到了一种可能的方法 here as well as a blog and a github-link 来(希望)补偿不包括内联代码!