UPDATES (4th March, 2024):
- I have revised my question to eliminate unnecessary code and wording. It should now be clearer and more readable.
- I've learned that Spotify's scrollbar was created using javascript
I'm looking to create a scrollbar with the following two (2) characteristics:
- Overlays over the content of the div
- Features a transparent Scrollbar-track
In previous years, utilizing 'background: transparent' and 'overflow: overlay' worked but they are now deprecated.
I've searched for alternative methods through various sources but haven't found a solution yet.
While using Spotify, I noticed their customized scrollbar which had a transparent track - exactly what I'm aiming for.
Here's an image of the Spotify-styled scrollbar:
Image of This is the image of the Spotify Scrollbar
I've included a snippet below to demonstrate what I'm trying to accomplish. I've created three child divs in the snippet, each with different background colors, within a parent div with a scrollbar.
The transparency effect is working, however, I'm struggling to get the scrollbar to overlay the child divs inside the parent div.
I'd appreciate any guidance on achieving this overlaying effect using:
- CSS alone
- OR by incorporating javascript.
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 <-------- */
overflow: overlay;
}
/* ----- House div needed to center the Parent ------ */
.house {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* --- Parent ----- */
.parent {
width: 450px;
height: 450px;
padding: 15px;
background-image: linear-gradient(to top, #ff00ff, #16dc7c);
border-radius: 10px;
overflow: hidden;
overflow-y: scroll;
}
/* ----- CHildren (All) ---- */
.child {
width: calc(100% - 50px);
/* width: 100%; */
height: 200px;
color: #ffffff;
padding: 10px 65px 0px 60px;
z-index: 10;
}
/* ----- First child ------ */
.child.ch1 {
background-color: #264cb3;
}
/* ---- Second Child ----- */
.child.ch2 {
background-color: #8728a7;
}
/* ---- Third Child ---- */
.child.ch3 {
background-color: #ad9521;
}<div class="house">
<div class="parent">
<div class="child ch1">
The scrollbar should overlay this div
</div>
<div class="child ch2">
The scrollbar should overlay this div
</div>
<div class="child ch3">
The scrollbar should overlay this div
</div>
</div>
</div>