在 Firefox 中使滚动条轨道透明

Posted 2023-03-06

【中文标题】在 Firefox 中使滚动条轨道透明

【英文标题】：Make scrollbar track transparent in Firefox

【发布时间】：2022-01-23 14:42:18

【问题描述】：

我已经设法自定义了在 Chrome、Safari 和 Edge 中工作的列表的滚动条，但是在 Firefox 中，轨道仍然出现。似乎 Firefox 不支持 ::webkit-scrollbar 所以有人对如何使轨道透明/不可见有任何建议吗？

【问题讨论】：

codepen.io/reacraf/pen/ExaBZzZ - 看看这个，滚动条颜色似乎有两个参数：条的颜色和背景颜色。

【参考方案1】：

试试这个代码。

.scrollbar 
  width: 500px;
  height: 150px;
  overflow-y: scroll;
  scrollbar-color: grey transparent;
  scrollbar-width: thin;


.scrollbar::-webkit-scrollbar-track

    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;


.scrollbar::-webkit-scrollbar

    width: 6px;
    background-color: #F5F5F5;


.scrollbar::-webkit-scrollbar-thumb

    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    background-color: grey;

<div class="scrollbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum semper tortor at pellentesque. Suspendisse iaculis quis risus in sagittis. Vestibulum elementum pulvinar vulputate. Morbi rutrum nisl eget finibus efficitur. Donec sed pellentesque purus. Nam vel euismod quam. Quisque lobortis aliquet nibh nec placerat. Maecenas volutpat orci dolor, mollis elementum tortor efficitur malesuada.Ut elementum sagittis lorem, non tempus diam euismod eu. Nullam vel diam ornare, aliquet enim non, sodales nulla. Pellentesque molestie, felis id pellentesque mattis, purus metus ultrices ipsum, vitae tristique nunc ante a odio. Quisque malesuada, felis sed tempor feugiat, est ante hendrerit sem, a porta elit metus ac est. Nullam sed felis leo. Donec ac vehicula dolor. Duis vel lacus volutpat, congue leo et, congue ex. Nullam rhoncus orci ut odio rutrum, id hendrerit elit malesuada. Curabitur orci neque, mollis ut aliquam a, dictum vitae massa. Donec efficitur ornare varius. Aliquam vulputate pharetra tortor nec finibus.


</div>