[英]How can I make the scrollbar transparent?
What I want is that the scroll is overlaid and transparent, so the elements behind it are shown through. 我想要的是滚动条是叠加的且透明的,因此滚动条后面的元素将通过显示出来。
And This is what I want the scrollbar to look like. 这就是我希望滚动条的外观。
Transparent scrollbar with css 带有CSS的透明滚动条
I tried all of the code in the above question, but it failed. 我尝试了上述问题中的所有代码,但失败了。
My current css is this. 我当前的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;
}
If you just want to hide the scrollbar, here's an easy fix: 如果您只想隐藏滚动条,这是一个简单的解决方法:
HTML : HTML :
<div>
...Lots of text
</div>
CSS : CSS :
div::-webkit-scrollbar { width: 0 }
div {
overflow: -moz-scrollbars-none; /* Firefox */
-ms-overflow-style: none; /* IE */
}
Try using this it works for me . 尝试使用它对我有用。
::-webkit-scrollbar { display: none; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.