时间戳

首页 > 解决方案 > 滚动条轨道上的透明背景

html - 滚动条轨道上的透明背景

问题描述

我有一个用线条分隔不同部分的 div，在 x 轴上有一个滚动条。我有一个功能，当用户将鼠标悬停在 div 上时，会显示滚动条拇指。但是，滚动条轨迹会在 div 的底部留下一条白线。我尝试background: none;将背景设置为透明图像。有没有什么办法解决这一问题？

代码沙盒：https ://codesandbox.io/s/festive-hermann-xejx0?file=/src/App.js

标签： htmlcssreactjs

解决方案

div::-webkit-scrollbar{ background: 0}
div:hover::-webkit-scrollbar{ background: #aaa; height: 25px }
div:hover::-webkit-scrollbar-thumb{ background: #fff; border-radius: 10px}

不幸的是，css 不一致，“0”不能替换为“none”。

它-webkit-只有部分支持，对于 chrome 和 Opera 作品，对于 IF 和 FF（我现在无法测试），您可以添加不带任何前缀

div::scrollbar{ background: 0}

毕竟，它在不同的设备上看起来会有所不同——一如既往的支持有限。您可以为受支持的浏览器尽力而为，但总会出现一个白条（这并不是世界上最丑陋的东西）。

恐怕没有别的事可做css。我不使用 js，所以我不会开始重新发明语法，特别是因为我不确定滚动条轨道是否可以通过js.

如果你非常坚定，总会有一些 CSS 技巧，比如 - 添加一个带有position: relative; bottom: 10px或者可能是一个非常时髦的 box-shadow 的窗帘，但我认为这不是一个好习惯，而是让人头疼......
也许 - 这个深色滤镜应该更暗从底部？

推荐阅读