设置滚动条透明，背后的背景图片可见。

Question

设置滚动条透明，背后的背景图片可见。

3

我在我的网站上使用自定义滚动条，想知道是否可以将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浏览器有另一种方法来解决我的网站的问题。

以下是Firefox中片段的截图： screenshot

编辑：对于Chrome的问题已得到@HereticMonkey的回答。但是，body的透明滚动条轨道在Firefox中不起作用。

我更改了的背景颜色和背景图像，以便使问题更加明显。

- BarryCap

使用 overflow: hidden 隐藏滚动条。 - C Rishi

我不想隐藏滚动条，我只想让滚动条后面的背景可见。 - BarryCap

2

@CRishi他不想让滚动条消失，他想在滚动条后面放一个可见的图片。 - I_love_vegetables

有关滚动条的问题有很多。使滚动条轨道透明，使用CSS制作透明滚动条。 - Heretic Monkey

1

这是否回答了你的问题？使用CSS创建透明滚动条 - Heretic Monkey

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sandeep K Goyal · Answer 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;
}