Автор

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

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>

 

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

 

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

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

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

Коллекция анимированных заголовков со сменными словами, которые заменяют друг друга с помощью CSS-переходов.


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

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


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

Страница 404 одна из наиболее распространенных страниц-ошибок для сайта, действие пользователей часто приводит к перенаправлению их на данную страницу, но когда посетитель видит обычную страницу ошибку, зачастую его просмотр сайта заканчивается, но как сделать, чтобы при попадании на такую страницу пользователи не убегали отвал, а возвращались назад к просмотру сайта. Как показывает статистика, посетители более дружелюбны к сайтам, где оформлены страницы ошибок, чем обычная заглушка ошибки.


75 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close