При разработке сайта мелочи играют не малую роль, и одна из таких мелочей – полоса прокрутки. Если мы хотим, чтобы каждый элемент нашего сайта выглядел везде одинаково, то не стоит забывать и про этот момент. Сегодня, мы рассмотрим jQuery плагин, при помощи которого можно легко и просто добавить свою полосу прокрутки с уникальным дизайном.
Для решения этой задачи в сети можно найти множество годных скриптов, но мы рассмотрим nanoScroller.js. На этот вариант, я наткнулся совсем недавно, простота работы с плагином гарантировала попадание его в мои закладки. Конечно, любой рабочий скрипт можно подключить на сайт, но есть варианты, на которые не хочется тратить время. Главная проблема плагинов scrollbar-ов - это в некоторых случаев избыточная HTML верстка, в nanoScroller.js этого нет, и подключение занимает несколько минут.
Подключим все необходимые стили и скрипты для нашей полосы прокрутки:
<link href="nanoScroller.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="nanoScroller.min.js"></script>
Теперь добавим HTML:
<div class="nano">
<div class="nano-content">
<!-- Контент -->
</div>
</div>
Вызовем новый метод после загрузки страницы:
$(function(){
$(".nano").nanoScroller({
alwaysVisible: true
});
});
После чего мы ничего не увидим. Стили, которые мы подключили, нужны для реализации логики плагина. Вся стилизация ложиться на наши руки:
.nano{
background-color: #eef3fb;
font-family: Arial, sans-serif;
margin: 30px auto 0;
width: 500px;
height: 500px;
}
.nano .nano-content{
padding: 10px 25px 10px 10px;
}
.nano .nano-content p{
margin-top: 0;
margin-bottom: 15px;
}
.nano .nano-content p:last-child{
margin-bottom: 0;
}
.nano .nano-pane{
background-color: #dce4f1;
}
.nano .nano-pane .nano-slider{
background-color: #496ea0;
}
В этой части CSS кода мы указали цвета для фона, scrollbara и ползунка полосы прокрутки. Результат этой магии вы сможете увидеть на странице «демо».
Уже из коробки плагин работает и не нуждается в настройке. По умолчанию полоса прокрутки скрыта, но это решается указанием true в параметре alwaysVisible, что мы и сделали в примере. Помимо этой настройки есть и другие, которые могут быть полезны:
- scroll – отвечает за положения видимой части и принимает два значения top и bottom;
- scrollTop/ scrollBottom – в этом свойстве мы можем указать значение offset для скролла относительно верхнего и нижнего положения;
- scrollTo – будет полезно, если необходимо при вызове метода промотать скролл до определённого элемента.
Ещё одна классная фича – это пользовательские события. При помощи их можно отследить положение ползунка в полосе прокрутки.
$(".nano").on("scrolltop", function(){
console.log("Скролл в верхнем положении.");
});
$(".nano").on("scrollend", function(){
console.log("Скролл в нижнем положении.");
});
Первые два варианта, как уже из кода понятно, отслеживают верхнее и нижние положение. Для того чтобы определить, куда именно скроллит пользователь, можно воспользоваться третьим событием:
$(".nano").on("update", function(event, values){
console.log(values);
});
В консоли будет, видна позиция ползунка и его направление:
Есть и другие настройки и события, которые поддерживает nanoScroller.js, но в статье я постарался выделить наиболее полезные из них. Сам же плагин можно найти на просторах github, где также находиться подробное руководство.