jQuery Scrollbar - кроссбраузерный скролбар для любого блока

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

Скачиваем плагин jQuery Scrollbar

Ниже представлены ссылки на скрипт плагина 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 Scrollbar к нужному блоку на странице

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

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

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

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

Ниже ссылка на пример рассмотренный в этом посте:

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

(6 голосов. Рейтинг: 4,17 из 5)
Загрузка...

16 thoughts on “jQuery Scrollbar – кроссбраузерный скролбар для любого блока

  1. Как изменить высоту ползунка (jspDrag) ?
    Если просто прописать в стилях через !important, то он уменьшается, но скролл перестаёт работать как надо.

    1. Высота задается для всего блока прокрутки в стилях

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

      а потом к этому блоку применяем сам скрипт


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

      1. Я имел в виду сам ползунок, точнее его размер. Та штука справа, за которую держимся, когда двигаем блок. В вашем примере она тёмно-фиолетовая.

        1. Высота ползунка формируется автоматически в зависимости от высоты скрытого (прокручиваемого) контента

          1. Высоту ползунка можно менять.
            jQuery(‘.hidden-block’).jScrollPane(
            { verticalDragMinHeight: 70,
            verticalDragMaxHeight: 70 }
            );
            });

            Число 70 стоит для примера.

  2. Доброго времени суток, спасибо за статью. Но не все вышло почему то, всё подключил, класс нужного блока прописал, в итоге скрылся системный скролл и вместо него не появился никакой скролл вообще. Понимаю что вина моя но разобраться не могу(

    1. заработал плагин только когда обернул текст в текст . но к блоку добавился класс jspScrollable и блок перестал “слушаться” бутстрап

        1. сделайте такую разметку
          <div class=”col-sm-6″>
          <div class=”terms_text”>
          <p>Ваш текст</p>
          </div>
          </div>

          1. Спасибо что откликнулись, но ничего не поменялось

          2. получается что скрип присваивает блоку определенную ширину и не меняет ее а это в данном случае не приемлемо, при чем присваивает ее в обход css

    1. Скрипт не мой ))
      Посмотрел демо-пример, все там работает, скорее всего вы что-то упустили.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *