Мобильная версияEDITS (4th March, 2023):
- I have rephrased my question to get rid of unnecessary code and wordings. I believe it's clearer and easier to read.
- I have been made aware that Spotify's scrollbar was constructed with javascript
I would like to make a scrollbar that has these two (2) characteristics:
- Overlays over the content of the div
- Has a transparent Scrollbar-track
In the previous years, using "background: transparent" worked "overflow: overlay" worked but it is now deprecated.
I have researched about alternative methods and gone through different posts, blogs and even questions on this platform all to no avail.
While using Spotify, I noticed their scrollbar was customized. It appeared to have a transparent scrollbar-track which was what I wanted.
This is the image of the Spotify scrollbar
Image of This is the image of the Spotify Scrollbar
I added a snippet to display what I am trying to achieve. In the snippet I created three "child" divs; with different background colors. They are all children of div named "parent" which has a scrollbar.
Transparency effect was achieved but I couldn't get the scrollbar to overlay the "child" divs in the "parent" div.
I would appreciate any advice on how to achieve this overlaying effect with:
- either CSS alone
- OR with javascript included.
html, body { margin: 0; padding: 0; box-sizing: border-box; } ::-webkit-scrollbar { width: 25px; border: 2px solid #a5393900; border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { width: 5px; background: #f2f2f282; background: #f2f2f28f; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } body { width: 100%; min-height: 100vh; /* ---- > depracated
Источник: https://stackoverflow.com/questions/780 ... javascript
