Спеціальна панель прокрутки CSS для Firefox

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

Будемо вдячні за чиюсь експертну пораду!

Станом на кінець 2018 року в Firefox зараз доступне обмежене налаштування!

Дивіться наступні відповіді:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

І це для довідкової інформації: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

У Firefox немає ::-webkit-scrollbarі друзів.

Вам доведеться дотримуватися JavaScript.

Чимало людей хотіли б цю функцію, дивіться: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Що стосується замін JavaScript, ви можете спробувати:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (але це застаріло і, мабуть, ПІТА ...)

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

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

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

Зауважте, що darkі lightзначення наразі не реалізовані у Firefox .

нотатки macOS:

Напівпрозорі панелі прокрутки, які автоматично переховуються, які є типовими для macOS, не можуть бути забарвлені цим правилом (вони все одно вибирають свій контрастний колір залежно від фону). Кольоровими є лише постійно показані смуги прокрутки (Налаштування системи> Показати смуги прокрутки> Завжди).

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

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

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

• auto Ширина смуги прокрутки за замовчуванням для платформи.
• thin Варіант ширини тонкої смуги прокрутки на платформах, які надають цю опцію, або тонший смуги прокрутки, ніж ширина смуги прокрутки платформи за замовчуванням.
• none Не відображається смуга прокрутки, однак елемент все одно буде прокручуватися.

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

Напевно, варто відзначити, що параметр значення довжини та все scrollbar-widthмайно розглядаються для видалення в майбутньому чернеті, і якщо це станеться, це властивість може бути видалено з 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>

Чи можу я запропонувати альтернативу?

Ніякого сценарію, лише стандартизовані стилі css та трохи творчості. Коротка відповідь - маскування частин існуючої панелі прокрутки браузера, що означає, що ви зберігаєте всю її функціональність.

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

Для демонстрації та трохи детальнішого пояснення перевірте тут ...

jsfiddle.net/aj7bxtjz/1/

Я думав, що поділюсь своїми висновками, якщо хтось розглядає плагін JQuery, щоб виконати цю роботу.

Я дав JQuery користувальницькій смузі прокрутки . Це досить фантазії і робить плавне прокручування (з інерцією прокрутки) і має безліч параметрів, які ви можете налаштувати, але це в кінцевому підсумку було занадто інтенсивним процесором для мене (і це додає DOM неабияку суму).

Тепер я даю ідеальну смугу прокрутки . Він простий і легкий (6 КБ) і до цього часу робить гідну роботу. Це зовсім не інтенсивний процесор (наскільки я можу сказати) і додає дуже мало вашому DOM. У нього є лише пара параметрів для налаштування (wheelSpeed ​​і wheelPropagation), але це все, що мені потрібно, і він прекрасно обробляє оновлення вмісту прокрутки (наприклад, завантаження зображень).

PS У мене був швидкий погляд на JScrollPane, але @simone вірно, це трохи датовано зараз і PITA.

Оскільки 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;

Рік 2020 це працює

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/isissue/160

Він працює в користувальницькому стилі, і, здається, не працює на веб-сторінках. Я не знайшов офіційного напрямку від 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;
    }
}