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
I tried all of the code in the above question, but it failed.
My current css is this.
::-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 :
<div>
...Lots of text
</div>
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.