Пользовательская полоса прокрутки отображается в Chromium и Safari, но не в Chrome

#html #css

#HTML #css

Вопрос:

У меня есть пользовательская полоса прокрутки, которая отображается в Chromium и Safari, но она не будет отображаться в Chrome … не имеет смысла! Кто-нибудь знает, что может быть причиной этого?

РЕДАКТИРОВАТЬ также стоит отметить, что полоса прокрутки РАНЬШЕ отображалась в Chrome просто отлично… может быть, какое-то новое обновление Chrome сломало его?

Вот ссылка на сайт (полоса прокрутки внизу):www.missingnewyork.com/store

И вот CSS для полосы прокрутки:

 ::-webkit-scrollbar {
    height: 1%;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: white;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}

1. не рекомендуется использовать пользовательские полосы прокрутки, поскольку их поведение нестабильно в разных версиях: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

2. спасибо вам за это. есть какие-либо обходные пути?

3. Сам CSS не имеет проблем в Chrome версии 85.0.4183.102 (macOS 10.15.6): jsfiddle.net/shivanraptor/Lqmek69r . На самом деле, полоса прокрутки работает на вашем веб-сайте, если вы измените высоту тела на большее значение, скажем, 10000 пикселей.

Ответ №1:

Вот как это должно выглядеть? (может быть, меньше)

Если это так, то это, вероятно, из-за height: 1%; . CSS не очень хорошо знает, что такое % для высоты, лучше не использовать его. Попробуйте использовать vh некоторое фиксированное значение.