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

Question

Дополнительно

Источник Неподдерживаемая версия AMP Редактировать

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

Я хочу настроить полосу прокрутки с помощью 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, если это возможно.

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

Community

Редактировал вопрос 12-го июля 2018 в 12:00

Программирование

firefox css webkit scrollbar

29-го мая 2011 в 1:44

268 просмотров

Комментарии к вопросу (6)

Tomaz

Источник Неподдерживаемая версия AMP Редактировать

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

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

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

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

[jsfiddle.net/aj7bxtjz/1/][1]

Mehdi Dehghani

Редактировал ответ 5-го июля 2017 в 2:14

42

0

Комментарии (6)

Alexander O'Mara

Источник Неподдерживаемая версия AMP Редактировать

Для Firefox 64 добавлена поддержка спецификаций проекта CSS для прокрутки Модуль 1, который добавляет два новых свойства]2 о скроллбара-ширина и полоса прокрутки-цвет, которые дают некоторый контроль над тем, как полосы прокрутки отображаются.

Вы можете установить полоса прокрутки-цвет одно из следующих значений (описания МДН):

режим "Auto" по умолчанию рендеринга платформы для отслеживания части полосы прокрутки, при отсутствии каких-либо других связанных с цветом свойства полосы прокрутки.
"темный" увидеть темную полосу прокрутки, которая может быть либо темный вариант прокрутки, предоставляемых платформой, или пользовательские полосы прокрутки с темными цветами.
свет показать светлую полосу прокрутки, которая может быть либо легкий вариант прокрутки платформы, или пользовательские полосы прокрутки в светлых тонах.
в <цвет> в <цвет> применяется первый цвет с ползунком, вторая полоса прокрутки трека.

Обратите внимание, что темных и светлых значения в данный момент не реализованы в 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>

в

Вы можете установить скроллбара-ширина одно из следующих значений (описания МДН):

режим "Auto" по умолчанию скроллбара ширина для платформы.
"тонкие" тонкие ширина скроллбара вариант на платформах, которые обеспечивают такую возможность, или тоньше полосы прокрутки, чем платформа по умолчанию ширина полосы прокрутки.
"нет" не отображается полоса прокрутки, но элемент все равно будет прокручивать.

Вы также можете установить определенное значение длина, согласно спецификации. Как "тонкие" и определенной длины может не делать ничего на всех платформах, и что именно она делает, это платформы. В частности, в 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>

в

Alexander O'Mara

Редактировал ответ 12-го марта 2019 в 7:49

37

0

Комментарии (7)

Markus Coetzee

Источник Неподдерживаемая версия AMP Редактировать

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

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

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

P.S. Я бегло просмотрел JScrollPane, но @simone прав, это немного устаревший вариант и хлопотный.

Matthew

Редактировал ответ 30-го октября 2017 в 6:21

36

0

Комментарии (4)

Luca Detomi

Источник Неподдерживаемая версия AMP Редактировать

Поскольку для 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, в настоящее время необходимо установить его как "тонкий" с следующее правило скроллбара-ширина: тонкие;

Luca Detomi

Редактировал ответ 13-го декабря 2018 в 8:15

26

0

Комментарии (1)

ipirlo

Источник Неподдерживаемая версия AMP Редактировать

Это работает в пользовательском стиле, и, похоже, не работает в веб-страницах. Я не нашел официальных указаний от 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/.

0

Комментарии (5)

ramme

Источник Неподдерживаемая версия AMP Редактировать

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

Magicprog.fr

Редактировал ответ 29-го января 2016 в 9:48

-1

0

Комментарии (1)