Menu
I've styled a scrollbar, but cursor pointer is not working, even after I put !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;
}I tried and ran it out. I don't see it working.
Can you help me get cursor: pointer for ::-WebKit-scrollbar.
Here are some links for where you can find the scrollbar and cursor pointer:
1
2
3
4
5
6
7
951
Check that the battery of the mouse is charged. Make sure that the receiver (dongle) is firmly plugged in to the computer. If your mouse and receiver can operate on different radio channels, make sure that they are both set to the same channel.
As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers. In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
In order to customize the scrollbar, you have to use ::-webkit-scrollbar property. You can specify the width of the scrollbar and also set the scrollbar track or path by setting the background property. Furthermore, you can also add some hover effect on ::-webkit-scrollbar-thumb .
Unfortunately due to this BUG fix of webkit, chrome will use the parent's cursor style for the child container.
You can fix your issue by just adding the following 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
