Пользовательская полоса прокрутки CSS для Firefox


313

Я хочу настроить полосу прокрутки с помощью CSS.

Я использую этот код WebKit CSS, который хорошо работает для 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, если это возможно.

Был бы признателен за чей-то экспертный совет!


1
Пожалуйста, поделитесь, как вы можете сделать это с помощью jQuery. Я столкнулся с той же проблемой, но использовал CSS, чтобы исправить это для Webkit. Однако Firefox создает проблему, с которой может помочь ваше решение jQuery.
iGbanam

1
Я рекомендую использовать плагин jscrollpane jQuery.
Дмитрий Воронцов

Существует проблема с jScrollPane в Firefox. jScrollPane отлично работает в Chrome, но в Firefox у вас есть пустая системная полоса прокрутки справа от полосы прокрутки jScrollPane. Должна быть только одна полоса прокрутки
iGbanam

1
Не правда. Если у вас есть это, вы где-то сделали что-то не так.
Дмитрий Воронцов

Смотрите мой ответ здесь: stackoverflow.com/questions/7357203/custom-scrollbars/…
Buzinas

Ответы:


239

По состоянию на конец 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, вы можете попробовать:


2
Спасибо, Тридцать Дот. Однако один вопрос: как насчет -moz-creation: scrollbartrack-vertical - и других связанных с ним расширений CSS? Возможно, они могут быть использованы каким-либо образом?
Дмитрий Воронцов

2
Нет. К сожалению, ни одно из возможных значений не -moz-appearanceможет помочь. "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- вы просто получите родную полосу прокрутки.
Тридцать

15
На всякий случай, если кто-то читает это, нужно практическое решение, я использовал плагин jscrollpane jQuery.
Дмитрий Воронцов

1
@JacquesMathieu, я понимаю, что ты имеешь в виду. Хотя это не вина Барона, если я загружаю страницу и не даю инициализации Барону, ошибка все равно возникает. Так что, похоже, Chrome виноват здесь.
Thephpdev

3
drafts.csswg.org/css-scrollbars-1 - это первый этап спецификации спецификации, но теперь он включен в Firefox Nightly из коробки по умолчанию.
Wegry

53

Firefox 64 добавлена поддержка спецификации проекта CSS Scrollbars Module Level 1 , который добавляет два новых свойства из scrollbar-widthи scrollbar-colorкоторые дают некоторый контроль над тем, как отображаются полосы прокрутки.

Вы можете установить scrollbar-colorодно из следующих значений (описания из MDN):

  • auto Рендеринг платформы по умолчанию для дорожки части полосы прокрутки при отсутствии каких-либо других связанных свойств цвета полосы прокрутки.
  • dark Показать темную полосу прокрутки, которая может быть либо темным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки с темными цветами.
  • light Показать светлую полосу прокрутки, которая может быть либо легкой версией полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки со светлыми цветами.
  • <color> <color> Применяет первый цвет к ползунку полосы прокрутки, второй - к дорожке полосы прокрутки.

Обратите внимание, что darkи lightзначения в настоящее время не реализованы в Firefox .

примечания macOS:

Автоматически скрывающие полупрозрачные полосы прокрутки, используемые по умолчанию в macOS, не могут быть окрашены этим правилом (они по-прежнему выбирают свой собственный контрастный цвет на основе фона). Только постоянно отображаемые полосы прокрутки (Системные настройки> Показать полосы прокрутки> Всегда) окрашены.

Визуальная демонстрация:

Вы можете установить scrollbar-widthодно из следующих значений (описания из MDN):

  • auto Ширина полосы прокрутки по умолчанию для платформы.
  • thin Тонкий вариант ширины полосы прокрутки на платформах, которые предоставляют эту опцию, или более тонкая полоса прокрутки, чем ширина полосы прокрутки платформы по умолчанию.
  • none Полоса прокрутки не отображается, однако элемент все еще можно прокручивать.

Вы также можете установить конкретное значение длины, в соответствии со спецификацией. И thinта, и другая длина могут ничего не делать на всех платформах, и что именно она делает, зависит от платформы. В частности, Firefox, похоже, в настоящее время не поддерживает определенное значение длины ( этот комментарий к их баг-трекеру, кажется, подтверждает это ). thinKeywork действительно , кажется, хорошо поддерживается , однако, с MacOS и поддержки Windows , в- крайней мере.

Вероятно, стоит отметить, что опция значения длины и все scrollbar-widthсвойство рассматриваются для удаления в будущем проекте, и если это произойдет, это конкретное свойство может быть удалено из Firefox в будущей версии.

Визуальная демонстрация:


Спасибо за этот ответ. Я обновил свой принятый ответ, чтобы продвинуть его (и другой соответствующий ответ), чтобы люди с большей вероятностью увидели его.
Тридцать

1
По сути, это дублирует ответ Луки за три недели до этого.
Джош Хабдас

@JoshHabdas Этот ответ не содержит почти столько информации о совместимости или использовании. Я создал этот ответ, потому что у другого ответа не было важной информации, которую я искал.
Александр О'Мара

1
Вы можете дать им кредит, предложить обратную связь или рассмотреть возможность редактирования их ответа.
Джош Хабдас

2
@JoshHabdas Ну, 5 человек уже сочли его полезным, и он содержит информацию, которую больше нигде не найти в Интернете, поэтому я не согласен.
Александр О'Мара

43

Могу ли я предложить альтернативу?

Никаких скриптов, только стандартизированные стили CSS и немного креативности. Краткий ответ - маскирование частей существующей полосы прокрутки браузера, что означает, что вы сохраняете все его функциональные возможности.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

Для демонстрации и немного более подробного объяснения, проверьте здесь ...

jsfiddle.net/aj7bxtjz/1/


7
Это не отвечает на вопрос, к сожалению. Дмитрий пытается стилизовать полосу прокрутки, а не скрывать ее.
stvnrynlds

14
Это было 4 года назад (я знаю об этом), поэтому я уверен, что он уже что-то сделал. Но тема по-прежнему актуальна и сегодня - в то время как другие браузеры допускают некоторые «незаконные» модификации полос прокрутки, FF этого не делает. Вот почему я решил опубликовать его. И результатом внешнего интерфейса является визуальная стилизация полосы прокрутки, независимо от того, что способ сделать это - скрыть ее часть.
Томаз

Мне нравится это решение, за исключением всей дополнительной разметки с абсолютным позиционированием (превращает материал переменного размера в кошмар), плюс вы не можете изменить стиль, вы просто маскируете / скрываете элементы существующего скроллера - очень плохо, если я хочу зеленую полосу!
RozzA

3
да, после четырех лет речь идет не столько об ответе на вопрос ОП, сколько о вкладе в сообщество.
tmthyjames

3
Суть проблемы заключается в том, что решения, предоставляемые некоторыми механизмами рендеринга, являются нестандартными. Это вопрос, который наилучшим образом решает мои проблемы, и это ответ, который я прокручивал.
Филипп Дупанович

36

Я думал, что поделюсь своими выводами на случай, если кто-то рассматривает плагин JQuery для своей работы.

Я дал JQuery Custom Scrollbar попробовать. Это довольно необычно и делает плавную прокрутку (с инерцией прокрутки) и имеет множество параметров, которые вы можете настроить, но в итоге это оказалось слишком загруженным для меня процессором (и это добавляет изрядное количество к DOM).

Теперь я использую Perfect Scrollbar . Это простой и легкий (6 КБ), и он делает достойную работу до сих пор. Насколько я могу судить, он совсем не загружает процессор и очень мало добавляет к вашему DOM. У него есть только пара параметров для настройки (wheelSpeed ​​и wheelPropagation), но это все, что мне нужно, и он прекрасно обрабатывает обновления прокручиваемого контента (например, загрузка изображений).

PS Я быстро взглянул на JScrollPane, но @simone прав, теперь он немного устаревший и PITA.


3
Есть также эмулятор прокрутки трекпада - это то, что использует twitch.tv.
forivall

1
Perfect Scrollbar на самом деле действительно хорош. После исчерпания многих других вариантов, я нашел, что это лучшее решение. Спасибо за предложение.
Леонард Тео

nanoScroller также действительно хорош и относительно скуден. jamesflorentino.github.io/nanoScrollerJS В отличие от тяжелых плагинов JS, этот просто скрывает собственный скроллер и показывает альтернативный скроллер с использованием собственного события «прокрутка»
Дэнни Р.

1
Я избегал всех решений jquery, поскольку они все отстают на более медленных машинах или машинах в состоянии стресса, но PS выглядит победителем
RozzA

31

Начиная с Firefox 64 , можно использовать новые спецификации для простого стиля полосы прокрутки ( не так полно, как в Chrome с префиксами поставщиков ).

В этом примере можно увидеть решение, которое объединяет разные правила для адресов как Firefox, так и Chrome с одинаковым (не равным) конечным результатом (например, используйте ваши исходные правила Chrome):

Основные правила:

Для Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Для Chrome

.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;
}

Обратите внимание, что в отношении вашего решения можно использовать и более простые правила Chrome, как указано ниже:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

Наконец, чтобы скрыть стрелки в полосах прокрутки также в Firefox, в настоящее время необходимо установить его как « тонкий » со следующим правиломscrollbar-width: thin;


1
Похоже, IE 5.5, возможно, все-таки понял что-то правильно. :)
Джош Хабдас


0

Он работает в пользовательском стиле и не работает на веб-страницах. Я не нашел официального направления от 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/ для деталей.


2
Я пытался так же, как вы написали, но это не работает для меня в FF, проверьте jsfiddle.net/gGbkY/1 я что-то упустил?
Satinder Singh

Он работает в пользовательском стиле и не работает на веб-страницах. Я не нашел официального направления от Mozilla по этому вопросу.
ipirlo

1
пожалуйста, проверьте ту же ссылку: это больше не работает
Крунал Шах

3
Каков пользовательский стиль?
Мареки

Об ошибке, о которой вы упоминали, было сообщено 17 лет назад и до сих пор не назначено. Я думаю, можно с уверенностью сказать, что FF никогда не будет поддерживать скрытие собственных полос прокрутки.
Стерлинг Борн

-2
@-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;
    }
}

5
Вы предоставили кодовый блок с практически полной информацией, описывающей, что он делает или как он это делает.
Джош Хабдас
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.