Скроллбар — perfect-scrollbar
Плагин позволяющий кастомизировать стандартный скроллбар.
Особенности
- Perfect-scrollbar никак не влияет на стиль оригинального скроллбара, он разработан так, что не имеет ширины или высоты.
- Позиционируется либо справа, либо внизу контейнера.
- Можно изменить практически все CSS стили для полосы прокрутки. Дизайн скроллбара не зависит от скрипта.
- Поддерживается функция "update" и используются "scrollTop" и "scrollLeft", а не абсолютное позиционирование или что-то ещё.
- Прекрасная поддержка RTL в браузерных движках WebKit и Gecko.
Чтобы плагин работал идеально, нужно соблюсти ряд требований, но ничего страшного в них нет.
- Контейнер должен иметь "position" в CSS
Следующие требования уже включены в CSS плагина, так что будьте внимательны, если будете его менять:
- Контейнер должен иметь свойство overflow:hidden
- Позиция скроллбара должна быть absolute
- Скроллбар по оси x должен иметь свойство bottom, а по оси y свойство right
Как же использовать?
CSS
<link rel='stylesheet' href='dist/css/perfect-scrollbar.css' />
<style>
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
</style>
JS
Prefect-scrollbar существует и как jquery плагин
<script src='js/perfect-scrollbar.jquery.js'></script>
$('#container').perfectScrollbar(); / Initialize
$('#container').perfectScrollbar({ ... }); // with options
$('#container').perfectScrollbar('update'); // Update
$('#container').perfectScrollbar('destroy'); // Destroy
Со всеми опциями и параметрами можно ознакомиться на Github
Установка
npm install perfect-scrollbar --save
yarn add perfect-scrollbar
bower install perfect-scrollbar --save