плагин для полосы прокрутки

Smooth Scrollbar — настраиваемый, производительный плагин для скроллбара

Хотите стилизовать полосу прокрутки на своем сайте? Рассматриваемый сегодня плагин JavaScript предлагает современное решение и уникальный эффект.

Описание плагина для стилизации полосы прокрутки

Стандартные элементы сколлбара в каждом браузере индивидуальны. Где-то это гармонично смотрится, а где-то, наоборот, ужасно. Для изменения внешнего вида ползунка и его области скольжения существуют множество плагинов и даже CSS-наработок. Сегодня речь пойдет о плагине Smooth Scrollbar.

Smooth Scrollbar -это расширение на JavaScript, которое позволяет Вам использовать стилизацию полос прокрутки кроссбраузерно. Это означает, что дизайн бегунка будет одинаково хорошо в любом браузере (даже на мобильном). Он использует translate3d для выполнения импульса, когда пользователь докручивает до границ сайта (она же инерциальная прокрутка) на современных браузерах. По словам автора, данный инструмент является идеальным для создания любого дизайна скроллбара.

Приведем таблицу совместимости:

Браузер Версия
IE 10+
Chrome 22+
Firefox 16+
Safari 8+
Android Browser 4+
Chrome для Android 32+
iOS Safari 7+

Установка и настройка плагина

Качаем все необходимое с помощью GitHub или NPM:

Подключаем файлы и инициализируем плагин

Задаем высоту и ширину для нашего контейнера:

Если у контейнера появилась полоса прокрукти перед инициализацией, значит, вы на правильном пути.

Ниже приводится структура DOM, который представляет полосы прокрутки:

Актуальную документацию можно найти по этой ссылки — https://github.com/idiotWu/smooth-scrollbar/blob/HEAD/docs.

В поисках шаблона для сайта?