Why does the CSS cursor property not work for the styled scrollbar?

user_13262204 0
Viewed 1925

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

css html
1 Answers

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>

user_11778140
Related