设置一个透明的滚动条，并在其后面显示背景图像
Posted
技术标签:
【中文标题】设置一个透明的滚动条，并在其后面显示背景图像【英文标题】：Set a scrollbar transparent with a background image visible behind it 【发布时间】：2021-08-07 12:41:35 【问题描述】：我在我的网站上使用自定义滚动条，我想知道是否可以将body 的背景图像隐藏 我的滚动条，因为它与textarea 配合得很好。
编辑：我希望滚动条仍然可以与光标一起使用。
textarea
background-repeat: repeat;
background-image: url(https://barrycap.com/assets/bg/home.svg);
width: 200px;
height: 150px;
resize: none;
scrollbar-color: #888f #fff0;
body
background-color: #222;
background-repeat: repeat;
background-image: url(https://barrycap.com/assets/bg/random.svg);
width: 200px;
height: 150px;
resize: none;
scrollbar-color: #888f #0000;
<html>
<body>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>我一开始没有看到它，但滚动条颜色在 Chrome 上不起作用（我在 Firefox 上发布了我的问题）。我在 Chrome 上为my site 提供了另一种方法。
这里是 Firefox 中 sn-p 的截图：
编辑：@HereticMonkey 已针对 Chrome 回答了该问题。
但是body 的透明滚动条轨道在 Firefox 中不起作用。
我更改了正文的背景颜色和背景图片，以使问题成为证据。
【问题讨论】：
使用overflow: hidden 隐藏滚动条。
我不想隐藏滚动条，我只想让背景在滚动条后面可见。
那我想这篇文章会对你有所帮助How to make scrollbar invisible
@CRishi 他不想让滚动条不可见，他想在可见的滚动条后面放一个图像
这能回答你的问题吗？ Transparent scrollbar with css
【参考方案1】：
添加这个 CSS：
::-webkit-scrollbar
width: 10px;
::-webkit-scrollbar-track
background-color:transparent;
::-webkit-scrollbar-track:hover
background-color: #eaeaea;
::-webkit-scrollbar-thumb
background-color: #888;
【讨论】：
它对我不起作用，无论是在 Chrome 还是 Firefox 上。但是，自定义滚动条可以在 Chrome 中使用。 您愿意在您的代码中使用开源第三方库吗？ 你总是可以建议...以上是关于设置一个透明的滚动条，并在其后面显示背景图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 MS Word 文档中显示代码片段，因为它在 *** 中显示（滚动条和灰色背景）