英文:
How to make scrollbar transparent in React app
问题
我正在尝试使滚动条（轨道）在React应用中不可见，只使拇指可见。然而，即使将*::-webkit-scrollbar-track*设置为以下内容，它仍然不起作用（因为滚动条的背景变为白色，我认为这是默认的浏览器颜色）：
- 背景或background-color: transparent
- 不透明度: 0%
理想情况下，我希望轨道不可见，以便与背景融合，只显示拇指。
目前，滚动条仅设置为轨道为灰色，拇指为深灰色。非常感谢任何帮助。
* {
box-sizing: border-box;
}
/* 滚动条 */
::-webkit-scrollbar {
width: 0.5vw;
}
::-webkit-scrollbar-track {
background-color: #0d111767;
}
::-webkit-scrollbar-thumb {
background-color: rgb(99, 99, 99);
border-radius: 10px;
}
/*------------------------------------------------- */
body {
margin: 0;
padding: 0;
max-width: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.App {
background-color: #0D1117;
color: white;
}
其余的代码...
英文:
I am trying to make the scrollbar (track) to be invisible while only making the thumb visible in React app. However, it is not working (as the scrollbar background becomes white which I assume is the default browser color) even after setting ::-webkit-scrollbar-track to have:
- background or background-color: transparent
- opacity: 0%
Ideally, I want to make the track to be invisible so that it blends in with the background while only showing the thumb.
As of now, the scrollbar is simply set to have gray for the track and dark gray for the thumb. I would greatly appreciate any help.
* {
box-sizing: border-box;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 0.5vw;
}
::-webkit-scrollbar-track {
background-color: #0d111767;
}
::-webkit-scrollbar-thumb {
background-color: rgb(99, 99, 99);
border-radius: 10px;
}
/*------------------------------------------------- */
body {
margin: 0;
padding: 0;
max-width: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.App {
background-color: #0D1117;
color: white;
}
rest of the code...
答案1
得分: 1
background-color: transparent;
会起作用。问题在于滚动条位于body中而不是应用程序中，所以它会获取body的颜色。将你的背景颜色添加到body而不是.App，你将会得到期望的效果。
这里是一个示例链接：
https://codesandbox.io/s/make-scrollbar-transparent-23f4y7?file=/src/styles.css
取消注释body中的background-color，滚动条轨道将会变成透明的。
英文:
background-color: transparent;
will work. Issue is the the scrollbar is located in the body and not the app so it is getting the body color. Add your background color to the body instead of to .App and you'll get the desired effect.
Here is a link to an example.
https://codesandbox.io/s/make-scrollbar-transparent-23f4y7?file=/src/styles.css
Uncomment the background-color in body and the scroll-bar-track will be transparent.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论