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

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

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

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

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

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

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

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

npm install smooth-scrollbar --save

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

<div id="my-scrollbar">
	<img src="https://idiotwu.github.io/smooth-scrollbar/images/your_diary.jpg">
</div>

<script src="dist/smooth-scrollbar.js"></script>

<script>
  var Scrollbar = window.Scrollbar;

  Scrollbar.init(document.querySelector('#my-scrollbar'), options);
</script>

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

#my-scrollbar {
  width: 500px;
  height: 500px;
  overflow: auto;
}

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

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

<scrollbar>
    <div class="scroll-content">
        your contents here...
    </div>
    <div class="scrollbar-track scrollbar-track-x">
        <div class="scrollbar-thumb scrollbar-thumb-x"></div>
    </div>
    <div class="scrollbar-track scrollbar-track-y">
        <div class="scrollbar-thumb scrollbar-thumb-y"></div>
    </div>
</scrollbar>

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