Скроллбар - 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>
 

jQuery

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
СКАЧАТЬСкачек: 121
162,8 Kb
Кто скачал? ДЕМОПосмотреть
пример
Java Script
  • Перевод: Игорь
bower install perfect-scrollbar
npm install perfect-scrollbar