当用户将鼠标悬停在滚动条上时如何增加滚动条的宽度
Mad*_*pop 6 html javascript css css-selectors
您好，我的自定义滚动条有问题
要求： 当用户将鼠标悬停在 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;
}
应用程序网址： https://stackblitz.com/edit/web-platform-9mbus1 ?file=styles.css
它只是应用颜色，而不是增加宽度和应用颜色
Roh*_*rma 11
尝试这个：-
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>| 归档时间： |
|
| 查看次数： |
1695 次 |
| 最近记录： |