Стилизованные скролл-бары для сайта
Настраиваемый пользовательский плагин jQuery для полосы прокрутки (скроллбар). Включает в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесико мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного ввода, готовые темы и настройку с помощью CSS…
Как установить:
1. Подключаем пакет стилей:
|
1 |
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" /> |
2. Подключаем сам плагин и библиотеку jQuery:
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script> |
3. Инициализация плагина
|
1 2 3 4 5 6 7 |
<script> (function($){ $(window).on("load",function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script> |
Как использовать
Активация горизонтального скроллбара:
|
1 2 3 |
$(".content").mCustomScrollbar({ axis:"x" // horizontal scrollbar }); |
Вертикальный и горизонтальный одновременно:
|
1 2 3 |
$(".content").mCustomScrollbar({ axis:"yx" // vertical and horizontal scrollbar }); |
Тема оформления:
|
1 2 3 |
$(".content").mCustomScrollbar({ theme:"dark" }); |
Более детально с настройками плагина вы можете ознакомиться здесь:
|
1 |
http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section |
Ну в целом и все. Предлагаем вам ознакомиться с разлиными вариантами применения плагина на странице демонстрации.
