Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин 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>
Плагин достаточно гибкий, по этому есть достаточно настроек для удобной реализации.
параметры: | Описание | Значение по умолчанию |
---|---|---|
axis | Вертикальная или горизонтальная прокрутка ('x'/'y'). | y |
wheel | Сколько пикселей перематывается одним движением колеса мыши. | 40 |
scroll | Включение/выключение прокрутки колесом мыши (true/false). | true |
size | Размер полосы прокрутки. auto — в зависимости от контента, или задаем число в пикселях. | 'auto' |
sizethumb | Размер ползунка. auto — в зависимости от контента, или задаем число в пикселях. | 'auto' |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.