Прозрачная полоса прокрутки с наложением, похожая на Spotify (Интернет), с использованием CSS и/или Javascript ⇐ CSS

[Anonymous]

Я хотел бы создать полосу прокрутки, которая имела бы эти две (2) характеристики:
[*]Наложение на содержимое элемента div. [*]Имеет прозрачную полосу прокрутки.
В предыдущие годы использование «background: Transparent» работало, а «overflow: overlay» работало но теперь оно устарело.

Я изучал альтернативные методы и просматривал различные публикации, блоги и даже вопросы на этой платформе, но безрезультатно.

Прослушивая Spotify, я заметил, что их полоса прокрутки настроена. Похоже, у него была прозрачная полоса прокрутки, чего я и хотел.

Это изображение полосы прокрутки Spotify

Изображение Это изображение полосы прокрутки Spotify

Я пытался повторить это, но безуспешно. Буду признателен за любые мысли о том, как обойти эту проблему.

Примечание:
[*]Я не пытаюсь клонировать Spotify, меня интересует только стиль их полосы прокрутки. [*]Я предполагаю, что их полоса прокрутки не является специально созданной/созданной полосой прокрутки (т. е. построенной с использованием JavaScript или других внешних сценариев/языков), а скорее реализована с помощью стилей CSS. Если да, то я был бы признателен за любые советы о том, как этого добиться.
Я предпринял две (2) попытки воспроизвести невидимую полосу прокрутки.

------ Первая попытка -----

В этой попытке я использовал CSS-анимацию, используя @property Я сделал фон дорожки полосы прокрутки таким же, как фон элемента div. Выглядело красиво, частично удалось обмануть глаз, чтобы часть трека выглядела прозрачной, но это не так. Он не накладывается, и трек не является прозрачным.

Проблема в том, что мне нужно настроить полосу прокрутки каждого элемента, но я ищу решение, которое работает со всех сторон.

Это изображение результата

Изображение первой попытки создания прозрачной полосы прокрутки

Вот фрагмент первой попытки

@property --inv { синтаксис: «»; наследует: правда; начальное значение: #0a3fa1; } .test_phrase{ ширина: 250 пикселей; высота: 500 пикселей; цвет: #dfdfdf; фон: #0a3fa1; поле: 20 пикселей 0 пикселей; фоновая позиция: центр; переполнение: скрыто; переполнение-y: прокрутка; полоса прокрутки: стабильная; переход: --inv 500 мс; задержка перехода: 1000 мс; } .test_phrase:hover { --inv: #ааа; переход: --inv 500 мс; } .test_phrase::-webkit-полоса прокрутки{ ширина: 10 пикселей; } .test_phrase::-webkit-scrollbar-track { фон: #0a3fa1; ширина: 10 пикселей; } .test_phrase::-webkit-scrollbar-thumb { фон: вар (--inv); Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар.

------ Вторая попытка -------

Во второй попытке я использовал свойства «scrollbar-width» и «scrollbar-color».

Это фактически сделало полосу прокрутки прозрачной по цвету, но псевдокоды Webkit больше не работают. Я хотел использовать их, чтобы изменить полосу прокрутки, чтобы она выглядела как результат первой попытки, но с настоящим прозрачным фоном.

Это изображение результата

[Изображение второй попытки создания прозрачной полосы прокрутки]

(https://i.stack.imgur.com/HRUGQ.png)

Вот фрагмент второй попытки:

.test_phrase{ ширина: 250 пикселей; высота: 500 пикселей; поле: 20 пикселей 0 пикселей; цвет: #dfdfdf; фон: #0a3fa1; фоновая позиция: центр; переполнение: скрыто; переполнение-y: прокрутка; ширина полосы прокрутки: авто; переход: 500 мс; задержка перехода: 1000 мс; полоса прокрутки: стабильная; /* Добавлены новые свойства */ цвет полосы прокрутки: hsla(0, 0%, 100%, .3) прозрачный; ширина полосы прокрутки: авто; } .test_phrase::-webkit-scrollbar-track { ширина: 10 пикселей; Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар. Lorem ipsum dolor, сидеть amet consectetur adipisicing elit. Facere Accusantium, Invente, Sunt Asperiores Officia Nihil Adipisci Veritatis porro deserunt dolorem incidunt ipsa itaque deleniti. Quidem aliquam dolore происшествие! Неке, товар.

--------- Заключение -----------

Вышеуказанные результаты были наиболее близки к полосе прокрутки Spotify. Хоть и наблюдалась небольшая прозрачность, я понятия не имею, как реализовать наложение полосы прокрутки

Это изображение полосы прокрутки Spotify, и с вашей помощью я надеюсь достичь конечного результата.

[Изображение полосы прокрутки Spotify]

(https://i.stack.imgur.com/DPDpQ.png)