React - 如何在谷歌浏览器上使滚动条轨道透明-解网

问：

::-webkit-scrollbar {
  width: 0.5vw;

}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

我在 css 中为滚动条制作了这段代码，并且滚动条可以正常工作，但由于某种原因，我不知道滚动条轨道在 chrome 上不透明。

我明白了：没有透明度轨道滚动条

但我想要这个结果（透明度）：预期

HTML CSS 反应JS google-chrome 滚动条

 1. you are using a black theme in your project, so if you give transparent it won't work, 
 2. you need to give a black color instead of transparent color
 3. simply change your code like this
::-webkit-scrollbar {
  width: 0.5vw;

}

::-webkit-scrollbar-track {
  background-color: balck; <!--here you need to update-->
}

::-webkit-scrollbar-thumb {
  background-color: rgb(99, 99, 99);
  border-radius: 10px;
}

}

0赞 errorau 11/2/2023 #2

您能否尝试将！important 添加到有关仅更改背景的相关位置，因为代码似乎结构正确，如下所示，它看起来像您的身体背景

 ::-webkit-scrollbar-track {
  background-color: transparent !important;
}

如果你有multible them 你需要切换主题，比如

.dark{
   background-color: #303030;
 }

 html.dark::-webkit-scrollbar-track {
   background-color: black; // or what color do you want to use :) 
 }

React - 如何在谷歌浏览器上使滚动条轨道透明

React - How to make the scrollbar track transparent on google chrome

评论

评论