How can I make the scrollbar transparent?

Question

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.

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;
}

Does this answer your question? [Transparent scrollbar with css](https://stackoverflow.com/questions/23200639/transparent-scrollbar-with-css) — karl-police, Sep 11 '22 at 15:36

score 1 · Answer 1 · answered Jan 12 '19 at 12:39

1

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 */
}

answered Jan 12 '19 at 12:39

Dave

53
2
10

2

Thank you for your reply. But what I wanted to do is not remove the scrollbars, but transparency. – Sungho Yahng Jan 12 '19 at 14:15

score 1 · Answer 2 · answered May 13 '19 at 09:57

1

Try using this it works for me .

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

answered May 13 '19 at 09:57

Ricky

488
3
14

How can I make the scrollbar transparent?

2 Answers2