Tiny Scrollbar: плагин для полосы прокрутки

Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин Tiny Scrollbar, который позволит создать собственную, плавную, полосу прокрутки с приятным интерфейсом. данный плагин позволяет реализовать как вертикальную так и горизонтальную полосу прокрутку. В данном уроке мы детально рассмотрим как подойти к данной реализации.

Чтобы реализовать задуманное нам понадобится сам плагин Tiny Scrollbar, и небольшое знания общих правил. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо подключить все фреймворки:

<link type="text/css" rel="stylesheet" href="css/tinyscrollbar.css"/>



<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

После этого мы создадим небольшую разметку, в котором будет реализован вывод скролла и, к примеру, материал который содержится в контейнере.

<div id="scrollbarY">
 <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
 <div class="viewport">
 <div class="overview">
 Желаемый текст
 </div>
 </div>
</div>

Все стили находятся в исходниках, при желании можно просмотреть и скопировать.

Шаг 2. JavaScript

Нам необходимо вызвать сам плагин, для этого следует разместить данный скрипт в удобном вам месте:

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('#scrollbarY').tinyscrollbar();
});
</script>

Плагин достаточно гибкий, по этому есть достаточно настроек для удобной реализации.

Вот и все. Готово!

Материал взят из зарубежного источника - baijs.nl/tinyscrollbar и представлен исключительно в ознакомительных целях.