如何使滚动条透明?

时间:2019-01-12 11:59:48

标签: javascript html css

我想要的是滚动条是覆盖的且透明的,因此滚动条后面的元素将显示出来。

enter image description here

这就是我想要滚动条的样子。

enter image description here

Transparent scrollbar with css

我尝试了上述问题中的所有代码,但失败了。

我当前的CSS是这个。

::-webkit-scrollbar {
width: 10px;
background: transparent url('../../assets/transparentPNG.png') repeat !important;
}
::-webkit-scrollbar-track {
background: transparent url('../../assets/transparentPNG.png') repeat !important;
} 

::-webkit-scrollbar-track-piece:start {
    background: transparent url('../../assets/transparentPNG.png') repeat !important;
}
::-webkit-scrollbar-track-piece:end {
    background: transparent url('../../assets/transparentPNG.png') repeat !important;
}

::-webkit-scrollbar-thumb {
background-color: rgba(67, 62, 78, 0.1);
opacity: 0.1;
}

::-webkit-scrollbar-button {
display: none;
}

::-webkit-scrollbar-corner {
display: none;
}

2 个答案:

答案 0 :(得分:1)

如果您只想隐藏滚动条,这是一个简单的解决方法:

HTML

<div>
  ...Lots of text
</div>

CSS

div::-webkit-scrollbar { width: 0 }
div {
  overflow: -moz-scrollbars-none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

答案 1 :(得分:1)

尝试使用它对我有用。

 ::-webkit-scrollbar {
        display: none;
    }