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

5049
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: