使用CSS和/或Javascript覆盖类似于Spotify（Web）的滚动条

Question

编辑（2023 年 3 月 4 日）：

我重新表述了我的问题，删除了不必要的代码和措辞。我相信它更清晰易读。
我知道 Spotify 的滚动条是用 javascript 构建的

我想制作一个具有这两（2）个特征的滚动条：

覆盖 div 的内容
有透明的滚动条轨道

在前几年，使用“背景：透明”有效，“溢出：覆盖”有效但现在已弃用。

我研究了替代方法，并浏览了该平台上的不同帖子、博客甚至问题，但均无济于事。

在使用 Spotify 时，我注意到他们的滚动条是定制的。它似乎有一个透明的滚动条轨道，这正是我想要的。

这是 Spotify 滚动条的图像

我添加了一个片段来显示我想要实现的目标。在代码片段中，我创建了三个“子”div；具有不同的背景颜色。它们都是名为“parent”的 div 的子级，该 div 有一个滚动条。

实现了透明效果，但我无法让滚动条覆盖“父”div 中的“子”div。

如果有任何有关如何单独使用 CSS 或包含 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: #f2f2f24f;
  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>

Answer 1

Spotify 确实使用了自定义滚动条，如您所见这里。如果你想实现类似的目标，你将需要 Javascript 来实现同样的目标。

这是您可以使用纯 HTML 和 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>

使用CSS和/或Javascript覆盖类似于Spotify（Web）的滚动条

问题描述投票：0回答：1

1个回答

最新问题

使用CSS和/或Javascript覆盖类似于Spotify（Web）的滚动条

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1