使用 CSS 和/或 Javascript 类似于 Spotify (Web) 的透明叠加滚动条

Question

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

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

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

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

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

这是 Spotify 滚动条的图像

我尝试复制这个但没有成功。如果有任何关于如何解决这个问题的想法，我将不胜感激。

注意：

1. 我并不是想克隆 Spotify，我只对他们的滚动条的样式感兴趣。
2. 我假设他们的滚动条不是自定义生成/构建的滚动条（即使用javascript或其他外部脚本/语言构建），而是通过CSS样式实现。 如果是，那么我将不胜感激任何关于如何实现它的建议。

我进行了两 (2) 次尝试来复制不可见的滚动条。

------第一次尝试-----

在此尝试中，我使用了 CSS 动画 @property 我将滚动条轨道的背景设置为与div的背景相同。 它看起来不错，部分地欺骗了眼睛，让轨道件看起来是透明的，但事实并非如此。 它不会重叠，轨道也不透明。

这个问题是我必须自定义每个元素滚动条，但我正在寻找一种全面有效的修复方法。

这是结果的图像

这是第一次尝试的片段

@property --inv {
    syntax: "<color>";
    inherits: true;
    initial-value: #0a3fa1;
}

.test_phrase{
    width: 250px;
    height: 500px;
    color: #dfdfdf;
    background: #0a3fa1;
    margin: 20px 0px;
    background-position: center;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    transition: --inv 500ms;
    transition-delay: 1000ms;
}

.test_phrase:hover {
    --inv: #aaa;
    transition: --inv 500ms;
}

.test_phrase::-webkit-scrollbar{
    width: 10px;
}

.test_phrase::-webkit-scrollbar-track {
    background: #0a3fa1;
    width: 10px;
}

.test_phrase::-webkit-scrollbar-thumb {
    background: var(--inv);
}

<div class="test_phrase">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
</div>

------ 第二次尝试 -------

在第二次尝试中，我使用了“滚动条宽度”和“滚动条颜色”属性。

这实际上使滚动条轨道颜色透明，但 webkit 伪代码不再起作用。我想用它们来修改滚动条，使其看起来像第一次尝试的结果，但具有实际的透明背景。

这是结果的图像

[第二次尝试创建透明滚动条的图像]

()

这是第二次尝试的片段：

.test_phrase{
    width: 250px;
    height: 500px;
    margin: 20px 0px;
    color: #dfdfdf;
    background: #0a3fa1;
    background-position: center;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: auto;
    transition: 500ms;
    transition-delay: 1000ms;
    scrollbar-gutter: stable;

    /* The new properties added */
    scrollbar-color: hsla(0, 0%, 100%, .3) transparent;
    scrollbar-width: auto;
}

.test_phrase::-webkit-scrollbar-track {
    width: 10px;
}

<div class="test_phrase">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere accusantium, inventore, sunt asperiores officia nihil adipisci veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore incidunt! Neque, commodi.
</div>

---------结论------------

以上是最接近 Spotify Scrollbar 的结果。 虽然观察到轻微的透明度，但我不知道如何实现滚动条的覆盖

这是 Spotify 滚动条的图像，在您的帮助下，这是我希望实现的最终结果。

[Spotify 滚动条的图像]

()

Answer 1

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

这是您可以使用纯 HTML 和 CSS 的替代方法：

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

    body {
      overflow: overlay;
    }

    #main-container {
      width: 500px;
      height: 500px;
      background-image: linear-gradient(to top, blue, purple);
      overflow-y: scroll;
    }

    #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="main-container">
      <div id="box">Here is my content</div>
    </div>
  </body>
</html>