当用户悬停在滚动条上时如何增加滚动条的宽度
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 来(希望)补偿不包括内联代码!
您好,我的自定义滚动条有问题
要求: 当用户悬停在 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 来(希望)补偿不包括内联代码!