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

[Anonymous]

Я хотел бы скрыть каждую полосу прокрутки внутри веб-страниц, но каждый элемент должен оставаться прокручиваемым.
Я делаю это с помощью элемента style, который я внесу на каждую веб-страницу, которую я посещаю, но на некоторых страницах имеется более одной полосы прокрутки, и я не могу стилизовать их все.
Я пробовал:

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

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

но это не стилизирует все полосы прокрутки.
РЕДАКТИРОВАТЬ 1
Это код, который я пробовал :

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

    const styleTag = document.createElement("style")

styleTag.textContent = `

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

document.head.appendChild(styleTag)

Этот код является частью файла preload.js, связанного с окном Electron, загруженным по URL-адресу, но я думаю, что это не имеет значения.
< h1>РЕДАКТИРОВАТЬ 2

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

(спасибо @Yogi)
Сказав это теперь мне нужно, чтобы мой тег style также мог перезаписывать «уже стилизованные полосы прокрутки» на странице.
Кто-нибудь знает, как сделать мой внедренный 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

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