Я хочу настроить полосу прокрутки с помощью CSS.
Я использую этот CSS-код WebKit, который хорошо работает в Safari и Chrome:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Как я могу сделать то же самое в Firefox?
Я знаю, что могу легко сделать это с помощью jQuery, но я бы предпочел сделать это с помощью чистого CSS, если это возможно.
Буду благодарен за чей-то экспертный совет!
С конца 2018 года в Firefox доступна ограниченная настройка!
Смотрите эти ответы:
А это для справки: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
В Firefox нет эквивалента ::-webkit-scrollbar
и друзьям.
Вам'придется использовать JavaScript.
Множество людей хотели бы получить эту функцию, см.: https://bugzilla.mozilla.org/show_bug.cgi?id=77790.
Что касается замены JavaScript, вы можете попробовать:
Могу ли я предложить альтернативу?
Никаких сценариев, только стандартные стили CSS и немного творчества. Короткий ответ - для маскировки части существующей полосы прокрутки браузера, что означает, что вы сохраняете все это'с функциональность.
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
Для демо и немного более подробное объяснение, проверить здесь...
[jsfiddle.net/aj7bxtjz/1/][1]
Для Firefox 64 добавлена поддержка спецификаций проекта CSS для прокрутки Модуль 1, который добавляет два новых свойства]2 о скроллбара-ширина
и полоса прокрутки-цвет
, которые дают некоторый контроль над тем, как полосы прокрутки отображаются.
Вы можете установить полоса прокрутки-цвет
одно из следующих значений (описания МДН):
свет
показать светлую полосу прокрутки, которая может быть либо легкий вариант прокрутки платформы, или пользовательские полосы прокрутки в светлых тонах.<цвет>
в <цвет>
применяется первый цвет с ползунком, вторая полоса прокрутки трека.Обратите внимание, что темных
и светлых
значения в данный момент не реализованы в Firefox.
под управлением macOS Примечания:
Авто-скрытие полупрозрачные полосы прокрутки, которые являются в macOS по умолчанию не может быть окрашен с этим правилом (они все равно выбирают свои контрастные цвет в зависимости от фона). Только постоянно показывать полосы прокрутки (Системные настройки и GT; показать полосы прокрутки > всегда) цветные.
Визуальная Демонстрация:
в
.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.scroll-color-dark {
scrollbar-color: dark;
}
.scroll-color-light {
scrollbar-color: light;
}
.scroll-color-colors {
scrollbar-color: orange lightyellow;
}
<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>
<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>
<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>
в
Вы можете установить скроллбара-ширина
одно из следующих значений (описания МДН):
Вы также можете установить определенное значение длина, согласно спецификации. Как "тонкие" и определенной длины может не делать ничего на всех платформах, и что именно она делает, это платформы. В частности, в Firefox не'т, кажется, поддерживают определенное значение длина (этот комментарий на их багтрекер, кажется, подтверждает это). Тонко
клапанам, кажется, хорошо поддерживается, однако с macOS и Windows, поддержка по-крайней мере.
Это's наверное стоит отметить, что параметр значения длина и всю скроллбара-ширина собственность
рассматриваются для удаления в будущем проекте, и если что случится данное конкретное свойство может быть удалено из Firefox в будущих версиях.
Визуальная Демонстрация:
в
.scroll {
width: 30%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-width-auto {
scrollbar-width: auto;
}
.scroll-width-thin {
scrollbar-width: thin;
}
.scroll-width-none {
scrollbar-width: none;
}
<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>
<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>
в
Я решил поделиться своими выводами на случай, если кто-то рассматривает плагин JQuery для выполнения этой работы.
Я попробовал JQuery Custom Scrollbar. Он довольно причудлив, делает плавную прокрутку (с инерцией прокрутки) и имеет множество параметров, которые можно настроить, но для меня он оказался слишком требовательным к процессору (и он добавляет достаточно много в DOM).
Теперь я предлагаю Perfect Scrollbar. Он прост и легок (6 КБ) и пока справляется со своей работой. Он совсем не требователен к процессору (насколько я могу судить) и добавляет очень мало в DOM. У него есть только пара параметров для настройки (wheelSpeed и wheelPropagation), но это все, что мне нужно, и он отлично справляется с обновлениями прокручиваемого содержимого (например, загрузкой изображений).
P.S. Я бегло просмотрел JScrollPane, но @simone прав, это немного устаревший вариант и хлопотный.
Поскольку для Firefox 64, можно использовать новые характеристики для простой прокрутки укладки (не такое полное, как в хроме с вендорных префиксов).
В [этот пример][3] можно увидеть решения, которые объединяют различные правила для решения обоих Firefox и Chrome с подобным (не равно) конечный результат (например, использовать оригинальные правила хром):
Ключевые правила:
Для Firefox
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
Для Хром
.scroller::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.scroller::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Обратите внимание, что в отношении вашего решения, можно использовать также простые правила хром как следующие:
.scroller::-webkit-scrollbar-track {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb {
height: 30px;
background-color: #0A4C95;
}
Наконец, для того, чтобы скрыть стрелки прокрутки также в Firefox, в настоящее время необходимо установить его как "тонкий" с следующее правило скроллбара-ширина: тонкие;
Это работает в пользовательском стиле, и, похоже, не работает в веб-страницах. Я не нашел официальных указаний от Mozilla по этому поводу. Хотя это могло работать в какой-то момент, Firefox не имеет официальной поддержки для этого. Эта ошибка все еще открыта https://bugzilla.mozilla.org/show_bug.cgi?id=77790.
scrollbar {
/* clear useragent default style*/
-moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
-moz-appearance: none !important;
}
/* the sliding part*/
thumb{
-moz-appearance: none !important;
}
scrollcorner {
-moz-appearance: none !important;
resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
color:silver;
}
подробности смотрите на http://codemug.com/html/custom-scrollbars-using-css/.
@-moz-document url-prefix(http://),url-prefix(https://) {
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
scrollbarbutton {
display: none !important;
}
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}