jQuery Scrollbar

Опубликовано: 02 Ноя 2015

Взято тут.

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

Демо-пример. jQuery скролбар для блока

Исходники

Ниже представлены ссылки на скрипт плагина jQuery Scrollpane, скрипт для прокрутки скролбара с помощью колеса мышки и файл стилей для скролбара.

Скрипт плагина jQuery Scrollpane

Скрипт для прокрутки скролбара с помощью колеса мышки

Файл стилей для скролбара

Все это скачиваем и подключаем к себе на сайт:

<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

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

$(function(){
  $('#wrapper').jScrollPane();
});

Вот и все наш скрипт, почти заработал, остался последний штрих.
Зададим ширину и высоту для нашего блока #wrapper.

#wrapper {width: 250px; height: 350px; margin: 0 auto;}

Сайт плагина jQuery Scrollpane

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: