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

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

Шаг 1. HTML

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

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

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

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

Шаг 2. JavaScript

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

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

параметры: Описание Значение по умолчанию
axis Вертикальная или горизонтальная прокрутка (‘x’/’y’). y
wheel Сколько пикселей перематывается одним движением колеса мыши. 40
scroll Включение/выключение прокрутки колесом мыши (true/false). true
size Размер полосы прокрутки. auto — в зависимости от контента, или задаем число в пикселях. ‘auto’
sizethumb Размер ползунка. auto — в зависимости от контента, или задаем число в пикселях. ‘auto’

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

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

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