Полоса прокрутки CSS не работает за пределами Chrome?

Я использую этот код CSS, чтобы настроить стиль полосы прокрутки:

::-webkit-scrollbar {
      width: 8px;
} /* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
      background-color: black;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: #59e5f6;
      border-radius: 10px;
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: black;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

body {
    scrollbar-face-color: black;
}

Он отлично работает в Chrome, но не в других браузерах.

Вы знаете, как это исправить?

Что ж, тот факт, что все эти свойства начинаются с -webkit-, является большой подсказкой: в других браузерах этого просто нет. См., Например, MDN. Так что нет.

Mr Lister 13.05.2018 13:26

Спасибо, не знал этого. Вы знаете, что мне использовать?

MorBek 13.05.2018 22:22

Вероятно, существуют библиотеки JavaScript, которые позволяют вам это делать. Хотя не знаком ни с одним из них.

Mr Lister 14.05.2018 08:41

Пожалуйста, никогда не делайте этого, если только вы не хотите досадить почти всем. Оставьте мои полосы прокрутки в покое.

Relequestual 03.09.2018 15:54
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
4
1 652
1

Ответы 1

По умолчанию он не поддерживается в IE, Edge и Firefox. Вот скриншот из документации https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

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

Другие вопросы по теме