为什么 CSS 光标属性不适用于样式滚动条？

Question

我已经设计了一个滚动条，但光标指针不起作用，即使我把!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的::-WebKit-scrollbar。以下是您可以在其中找到滚动条和光标指针的一些链接：

1

2

3

4

5

6

7

Answer 1

不幸的是，由于webkit 的这个BUG 修复，chrome 将为子容器使用父级的光标样式。

您只需添加以下 CSS 即可解决您的问题：

HTML {
  cursor: pointer;
}

body {
  cursor: default;
  ...
}

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;
}