我设计了一个滚动条, but 光标指针不工作，即使我把!important.
::-webkit-scrollbar {
width: 0.3vw;
height: 20px;
padding: 2px;
cursor: pointer !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: #808080;
border-radius: 70px;
padding: 2px;
cursor: pointer !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #424242;
cursor: pointer !important;
}
::-webkit-scrollbar-track {
background-color: transparent;
cursor: pointer !important;
}
body {
height: 90000px;
}
我尝试了一下并运行了它。我不认为它有效。
你能帮我得到吗cursor: pointer for ::-WebKit-scrollbar。
以下是一些可以找到滚动条和光标指针的链接：
1 https://www.w3schools.com/cssref/pr_class_cursor.asp
2 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
3 https://css-tricks.com/almanac/properties/s/scrollbar/
4 https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
5 https://css-tricks.com/custom-scrollbars-in-webkit/
6 https://codepen.io/devstreak/pen/dMYgeO
7 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
不幸的是由于这个webkit的BUG修复 https://bugs.chromium.org/p/chromium/issues/detail?id=876180，chrome 将为子容器使用父容器的光标样式。
您只需添加以下 CSS 即可解决您的问题：
HTML {
cursor: pointer;
}
body {
cursor: default;
...
}
::-webkit-scrollbar {
width: 10px;
height: 20px;
padding: 2px;
cursor: pointer !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: #808080;
border-radius: 70px;
padding: 2px;
cursor: pointer !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #424242;
cursor: pointer !important;
}
::-webkit-scrollbar-track {
background-color: transparent;
cursor: pointer !important;
}
html {
cursor: pointer;
}
body {
cursor: default;
height: 90000px;
}
<html>
<body>
<div>
<h1>Hello</h1>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
