css - 无法使用 css 将样式应用于滚动条

Question

目前，当需要时，我会在页面的一部分上显示滚动条。

我想对滚动条应用样式，使其看起来不那么明亮，并且我可以使滚动条的背景区域透明。因此，我尝试对其应用样式。但滚动条似乎还是一样。为了测试样式是否有效，我根据本文为滚动提供了一些样式: https://css-tricks.com/almanac/properties/s/scrollbar/

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
    background-color: red;
    outline: 1px solid slategrey;
}

但似乎一切都没有改变。 在开发者工具中甚至看不到这些样式属性。

是否无法将自定义样式应用于浏览器滚动条？另外，我可以为 div 元素赋予滚动条样式吗？或者它必须在根/主体级别？

Answer 1

这会在 Firefox、Chrome、Edge 和 Safari 上提供透明背景。

编辑: 似乎 ::webkit-scrollbar 下需要 height 才能在 chrome< 上工作/strong> 使用 MacOS。

body {
  margin: 0;
  background: grey;
  height: 500px;
  overflow: overlay;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: green transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

<body/>