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

16.10.2017 weatherless JavaScript » Разное на JavaScript » #1382

Смотреть Источник Скачать

Хотите стилизовать полосу прокрутки на своем сайте? Рассматриваемый сегодня плагин 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:

npm install smooth-scrollbar --save

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

</div>

var Scrollbar = window.Scrollbar;

Scrollbar.init(document.querySelector('#my-scrollbar'), options);

</script>

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

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

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