Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла:

  1. для Firefox;
  2. для остальных браузеров;
  3. кроссбраузерная стилизация с помощью плагина mCustomScrollbar.

1. Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

html, body {
    scrollbar-color: #458245 #714826;     /* «цвет ползунка» «цвет полосы скроллбара» */
    scrollbar-width: auto | thin | none;  /* толщина */
}

Первое значение scrollbar-color изменяет цвет ползунка, второе - цвет скроллбара.

Стилизация скролла в Mozilla Firefox

Значения scrollbar-width изменят толщину (ширину - для вертикального скроллбара, высоту - для горизонтального):

  • auto - толщина скролла по умолчанию;
  • thin - более тонкий вариант скролла;
  • none - скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла


Какой-то контент. Текст, изображения или что-то ещё.



2. Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

/* полоса прокрутки (скроллбар) */
::-webkit-scrollbar {
    width: 24px; /* ширина для вертикального скролла */
    height: 8px; /* высота для горизонтального скролла */
    background-color: #143861;
}

/* ползунок скроллбара */
::-webkit-scrollbar-thumb {
    background-color: #843465;
    border-radius: 9em;
    box-shadow: inset 1px 1px 10px #f3faf7;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #253861;
}

/* Стрелки */

::-webkit-scrollbar-button:vertical:start:decrement {
    background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}

3. mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.

Сначала скачайте архив и извлеките к себе в проект файлы:

  1. jquery.mCustomScrollbar.min.css
  2. jquery.mCustomScrollbar.concat.min.js
  3. mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js">

Инициализация

Инициализация через JavaScript

(function($) {
    $(window).on('load', function() {
        $('el').mCustomScrollbar();
    });
})(jQuery);

Инициализация в HTML

<div class="mCustomScrollbar" data-mcs-theme="3d-dark">
  <!-- Ваш контент -->
</div>

Настройки

$('el').mCustomScrollbar({
    axis: 'y',              // вертикальный скролл

    theme: 'rounded-dark',  // тема

    scrollInertia: '330',   // продолжительность прокрутки, значение в миллисекундах

    setHeight: 800,         // высота блока (переписывает CSS)

    mouseWheel: {
        deltaFactor: 300    // кол-во пикселей на одну прокрутку колёсика мыши

    }
});

Темы mCustomScrollbar

Выбрать подходящую тему можно здесь.

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

admin
01/05/2020 08:15