Как скрыть каждую полосу прокрутки одновременно с помощью внедренного CSS (сохраняя возможность прокрутки элемента) ⇐ CSS

[Anonymous]

ОТРЕДАКТИРОВАНО
Я хотел бы скрыть каждую полосу прокрутки внутри веб-страниц, чтобы каждый прокручиваемый элемент всегда был прокручиваемым.
Я работаю над этим внедренный файл Javascript, который добавляет элемент стиля на каждую веб-страницу, которую я посещаю, но на некоторых страницах имеется более одной полосы прокрутки, и мой тег не может стилизовать их все.
Внедренный скрипт:

Код: Выделить всё

const styleTag = document.createElement("style")

styleTag.textContent = `

::-webkit-scrollbar {
appearance: none !important;
width: 0;
height: 0;
}
`

document.head.appendChild(styleTag)

Пользователь @Yogi обнаружил проблему:

Ваш CSS отлично работает на полосах прокрутки по умолчанию. Это не работает с элементами, где страница уже стилизует полосу прокрутки. Например, электронная страница применяет стиль .thin-scrollbar::-webkit-scrollbar в медиа-запросе. Следовательно, ваш CSS игнорируется, даже если вы применяете важный.

Минимальный воспроизводимый пример

Код: Выделить всё

.container {
display: flex;
gap: 1rem;
}

.box {
box-sizing: border-box;
padding: 0.5rem;
overflow: scroll;
height: 20rem;
max-height: 100%;
border: thin solid black;
}

.spacer {
height: 50rem;
width: 50rem;
}

@media(pointer:fine) {
.thin-scrollbar {
scrollbar-width: thin;
}
.thin-scrollbar::-webkit-scrollbar:horizontal {
/* placeholder */
}
.thin-scrollbar::-webkit-scrollbar:vertical {
/* placeholder */
}
}

::-webkit-scrollbar {
appearance: none !important;
width: 0;
height: 0;
}

Код: Выделить всё

OK - scrollbars hidden

This box has default scrollbars

Bottom


FAIL - scrollbars visible

This box uses a styled scrollbar

Bottom

Итак, мне нужно, чтобы мой тег style мог перезаписывать на странице тоже есть «уже стилизованные полосы прокрутки».
Кто-нибудь знает, как сделать внедренный мной CSS самым важным в документе?

Подробнее здесь: https://stackoverflow.com/questions/790 ... ment-scrol