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

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>

Tags:

Html

Css

Recent Posts