Реклама
timeweb
falbar Полоса прокрутки на jQuery

Полоса прокрутки на jQuery

30 октября 2017 211 0

При разработке сайта мелочи играют не малую роль, и одна из таких мелочей – полоса прокрутки. Если мы хотим, чтобы каждый элемент нашего сайта выглядел везде одинаково, то не стоит забывать и про этот момент. Сегодня, мы рассмотрим 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);
});

В консоли будет, видна позиция ползунка и его направление:

v-konsoli-scrollbar

Есть и другие настройки и события, которые поддерживает nanoScroller.js, но в статье я постарался выделить наиболее полезные из них. Сам же плагин можно найти на просторах github, где также находиться подробное руководство.

Реклама
Комментариев еще не оставлено
no_avatar