Стилизуем полосы прокрутки с jScrollPane


Стилизуем полосы прокрутки с jScrollPane

4461
7.2 из 10
Проголосовало: 13






Наверное, многие сталкивались с проблемой стилизации полос прокрутки (скролл-баров). В этой статье вы узнаете, как создать простейший скролл-бар и стилизовать его, используя плагин jScrollPane.

Установка:

Для работы скрипта необходимо загрузить на сайт следующие 2 скрипта:
jquery.jscrollpane.js (14.76 Kb)
jquery.mousewheel.js (2.34 Kb)

И подключить их на страницу, добавив в <head>:

Код

<script src="http://адрес_сайта/jquery.mousewheel.js"></script>  
<script src="http://адрес_сайта/jquery.jscrollpane.js"></script>


Ну и, разумеется, стили, скролл-бары будут схожи со скролл-барами ВКонтакте. Вставляем стили в свой CSS:

Код

.jspContainer{overflow:hidden;position:relative;}  
  .jspPane{position:absolute;}  
  /* Вертикальная полоса прокрутки */  
  .jspVerticalBar{height:100%;position:absolute;right:0;top:0;width:5px;z-index:2;}  
  /* Горизонтальная полоса прокрутки */  
  .jspHorizontalBar{bottom:0;height:5px;left:0;position:absolute;width:100%;}  
  .jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0;}  
  .jspCap{display:none;}  
  .jspHorizontalBar .jspCap{float:left;}  
  /* Полоска, по которой бегает ползунок */  
  .jspTrack{background:#eee;position:relative;border-radius:5px;}  
  /* Непосредственно, сам ползунок */  
  .jspDrag{background:#aaa;cursor:pointer;left:0;position:relative;top:0;border-radius:5px;}  
  .jspDrag:hover {background:#999;}  
  .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%;}  
  /* Стрелки для прокрутки */  
  .jspArrow{background:#999;cursor:pointer;display:block;text-indent:-20000px;}  
  /* Неактивные стрелки для прокрутки */  
  .jspArrow.jspDisabled{background:#aaa;cursor:default;}  
  /* Дополнительные стили для вертикальных и горизонтальных стрелок */  
  .jspVerticalBar .jspArrow{height:16px;}  
  .jspHorizontalBar .jspArrow{float:left;height:100%;width:5px;}  
  .jspVerticalBar .jspArrow:focus{outline:none;}  
  /* Уголок, где сходятся вертикальная и горизонтальная полосы прокрутки */  
  .jspCorner{float:left;height:100%;}  
  * html .jspCorner{margin:0 -3px 0 0;}


Вот, собственно, и все, что необходимо было установить.

Как использовать?

Для начала создадим блок с текстом, над которым мы и будем работать в дальнейшем.

HTML:

Код
<div class="black">  
  <div class="white">  
  <div id="pane">  
  <p>Много-много текста...</p>  
  </div>  
  </div>  
  </div>


Стилизуем блок, как душе угодно. Можно например вот так:

Код
.black {position:relative;width:400px;border-radius:3px;margin:0 auto;color:#777;padding:5px;text-align:justify;background: rgba(0,0,0,0.9);}  
  .white {background:#fafafa;border-radius:3px;padding:15px;}


Для <div> , к которому мы будем присоединять скролл-бар, добавляем следующие стили:

Код
#pane {  
  max-height:200px; /* Выставляем ограничение по высоте */  
  overflow:auto; /* Добавляем стандартные полосы прокрутки на случай, если скрипт не сработает. */  
  outline:none; /* Убираем неприятную обводку при фокусе. */  
  }


Теперь JavaScript:

Код
<script type="text/javascript">  
  jQuery(function(){  
  $('#pane').jScrollPane();  
  });  
  </script>


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

Дополнительные настройки

Данный плагин имеет множество настроек, а так же API-функционал:

Код
<script type="text/javascript">  
  jQuery(function(){  
  $('#pane').jScrollPane({  
  showArrows:true, // Показываем стрелки на полосе прокрутки.  
  autoReinitialise:true, // Включаем автоматическую переинициализацию скрипта. Необходимо для элементов, которые меняют свою ширину/высоту.  
  autoReinitialiseDelay:1000, // Переинициализация скрипта 1 раз в секунду.  
  animateScroll:true, // Анимация прокрутки при вызове scrollTo и scrollBy.  
  mouseWheelSpeed:30, // На сколько пикселей производится прокрутка при скроллинге колесом мыши.  
  arrowButtonSpeed:30, // На сколько пикселей производится прокрутка при клике по стрелкам.  
  arrowScrollOnHover:true, // Включить скроллинг при наведении на стрелки.  
  hideFocus:true, // Скрываем outline при фокусе. Лучше не использовать эту функцию, а скрыть outline с помощью средств CSS.  
  clickOnTrack:true, // При нажатии на треке ползунок переходит в ту точку, на которую вы нажали.  
  trackClickSpeed:30, // На сколько пикселей производится прокрутка, пока мышь зажата на треке.  
  trackClickRepeatFreq:100 // Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата на треке  
  });  
  });  
  </script>


API-функционал.

В скрипте так же редусмотрены функции управления скроллом.
Для работы необходимо получить доступ к переменной "jsp":

Код
var pane = $('#pane').jScrollPane();  
  var api = pane.data('jsp');


Теперь мы можем управлять скроллом, обращаясь к переменной "api" и задавая необходимые функции. Список функций перечислен на оф. сайте
Пример вызова API-функции:

Код
var pane = $('#pane').jScrollPane();  
  var api = pane.data('jsp');  
  api.scrollTo(100, 100); // Прокрутка до 100px (x) и 100px (y)


На этом всё!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://web41k.ru/
  • Всего комментариев: 4

MSerega9680
0
MSerega9680 написал: Написано 23 мая 2014 в 00:26
Комментарий №4
Скопировал полностью весь код что тут написан на чистую страничку все подключил. Но скрол так и остался стандартным. Что я не так сделал?

carateli44
+2
carateli44 написал: Написано 27 Июня 2013 в 20:42
Комментарий №1
помогите! как его установить ? мне нужна только горизонтальная прокрутка!!

Goodmind
+1
Goodmind написал: Написано 28 Июня 2013 в 17:10
Комментарий №2
написано же dry

VZ
0
VZ написал: Написано 05 Сентября 2013 в 09:57
Комментарий №3
na body bydet rabotat?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 6
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: