Как изменить полосу прокрутки в браузере

Обновлено: 07.07.2024

Настройка полосы прокрутки (scrollbar) в основных браузерах была трудна и неприятна примерно до сентября 2018 года, когда был выпущен рабочий проект W3C CSS Scrollbars, который выглядит как реальный способ устранить трудности стилизации скроллбаров.

На протяжении многих лет появлялись различные способы сделать это. Microsoft Internet Explorer был одним из первых, кто предоставил CSS API для скроллбаров, но многие разработчики были настолько разочарованы реализацией, что создавали собственные решения с помощью JavaScript.

Однако, JavaScript-решения тоже не во всём идеальны, например им трудно эмулировать высокопроизводительное поведение, допустим, прокрутку с инерцией или прокрутку больших документов.

Перенесемся в настоящее время, теперь, когда Internet Explorer вытесняется Microsoft Edge, это сводится к двум подходам:

Chrome/Edge/Safari используют -webkit-scrollbar
Firefox использует новую спецификацию CSS Scrollbars API (т.е. scrollbar-color и scrollbar-width ).

Давайте посмотрим на некоторые примеры кода!

Скроллбары в Chrome/Edge/Safari

В Chrome/Edge/Safari для стилизации прокрутки доступны css-свойства с вендорным префиксом -webkit-scrollbar .

Скроллбары в Firefox

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией --webkit-scrollbar .

Во-первых, это лаконичный css-код! А во-вторых, в нём отсутствуют такие функции, как создание отступов и скруглений для плашки скролла. Поскольку спецификация всё ещё меняется, эти недостающие функции могут быть в неё включены.

Дальше-то, что?

Как стилизовать полосы прокрутки, с учётом отсутствия единого авторитетного API? Надо просто объединить оба подхода!

Когда --webkit-scrollbar устареет, можете спокойно вернуться к новому стандарту CSS Scrollbars.

Вариант с использованием настраиваемых CSS-свойств (CSS-переменные). В этом случае появляется возможность управлять настройками CSS-свойств полосы прокрутки из Javascript, например, для управления темами:

Ещё можно поэкспериментировать с CSS-градиентом, но этот вариант только для Webkit-браузеров:

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

Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.

В данной статье мы рассмотрим jQuery плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.

Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.

1. NiceScroll.js

NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.

2. NanoScroll

Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.

3. jQuery custom content scroller

Плагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.

4. Tiny Scrollbar

Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

5. Scrollbar Visibility

Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

6. jScrollPane

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

7. Scrollbar Paper

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

8. jQuery Scrollbars v2

Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.

9. Vertical scrollbar

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

Вывод

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

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

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

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

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

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

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

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

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

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

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

mCustomScrollbar

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

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

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.jpg

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

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

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

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

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

Настройки

Темы mCustomScrollbar

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

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

Добавление скролла

Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :

overflow-y: auto; - для создания вертикального скролла (+ max-height);
overflow-x: auto; - для создания горизонтального скролла (+ max-width).

При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .

Как скрыть скролл

Скроем скролл, но оставим возможность прокрутки блока.

CSS Scroll Snap

Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.

Читайте также: