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;}

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

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

(7 голосов. Рейтинг: 3,86 из 5)
Загрузка...

Метки:

Рубрика: jQuery

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

| RSS комментария

  1. Арс:

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

    • Дмитрий Британ:

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

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

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


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

      • Арс:

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

        • Дмитрий Британ:

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

          • Денис:

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

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

  2. Александр:

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

  3. Александр:

    //jsfiddle.net/Lkaq41hh/3/ тут все, еще скажу что если изменить количество текста в скачаном index.html то скролл пропадает тоже. Буду признателен за помощь.

    • Александр:

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

      • Александр:

        обернул текст в “p”

        • Дмитрий Британ:

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

          • Александр:

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

          • Александр:

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

  4. Владимир:

    Не работает Ваш скрипт

    • Дмитрий Британ:

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

  5. Maxim:

    С динамической шириной.

    $(‘#wrapper’).jScrollPane({
    autoReinitialise: true
    });

    #wrapper {
    width: 100%;
    }

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