Overlaying Scrollbar Similar to Spotify (Web) Using CSS and/or Javascript

Question

Overlaying Scrollbar Similar to Spotify (Web) Using CSS and/or Javascript

108 views Asked by Bennny Suun At 28 February 2024 at 04:50

EDITS (4th March, 2024):

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

Original Q&A

There are 1 answers

**Chinz** · Answer 1 · 2024-03-01T07:42:46+00:00

Spotify is indeed using a custom scrollbar as you can see here. If you want to achieve something like that, you will require Javascript to achieve the same.

Here is an alternative approach you can use using pure HTML and CSS:

<!DOCTYPE html>
<html>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: overlay;
    }

    #main-container {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }

    #wrapper {
      width: 500px;
      height: 500px;
      padding: 4px;
      background-image: linear-gradient(to top, blue, purple);
      border-radius: 10px;
      overflow: hidden;
    }

    #box {
      width: 100%;
      height: 800px;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(20, 20, 20, 0.507);
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }
  </style>

  <body>
    <div id="wrapper">
      <div id="main-container">
        <div id="box">Here is my content</div>
      </div>
    </div>
  </body>
</html>

TechQA.

Overlaying Scrollbar Similar to Spotify (Web) Using CSS and/or Javascript

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in WEBKIT

Popular Questions

Popular Tags

Trending Questions