Стилизованные скролл-бары для сайта

Настраиваемый пользовательский плагин jQuery для полосы прокрутки (скроллбар). Включает в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесико мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного ввода, готовые темы и настройку с помощью CSS…

Как установить:

1. Подключаем пакет стилей:

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

2. Подключаем сам плагин и библиотеку jQuery:

<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. Инициализация плагина

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

Как использовать

Активация горизонтального скроллбара:

$(".content").mCustomScrollbar({
    axis:"x" // horizontal scrollbar
});

Вертикальный и горизонтальный одновременно:

$(".content").mCustomScrollbar({
    axis:"yx" // vertical and horizontal scrollbar
});

Тема оформления:

$(".content").mCustomScrollbar({
    theme:"dark"
});

Более детально с настройками плагина вы можете ознакомиться здесь:

http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section

Ну в целом и все. Предлагаем вам ознакомиться с разлиными вариантами применения плагина на странице демонстрации.

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.