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
Подписаться
Понравилась статья, подпишись и получи больше хорошего материала.
Как изменить высоту ползунка (jspDrag) ?
Если просто прописать в стилях через !important, то он уменьшается, но скролл перестаёт работать как надо.
Высота задается для всего блока прокрутки в стилях
#wrapper {width: 250px; height: 350px; margin: 0 auto;}
а потом к этому блоку применяем сам скрипт
$(function(){
$('#wrapper').jScrollPane();
});
Я имел в виду сам ползунок, точнее его размер. Та штука справа, за которую держимся, когда двигаем блок. В вашем примере она тёмно-фиолетовая.
Высота ползунка формируется автоматически в зависимости от высоты скрытого (прокручиваемого) контента
Высоту ползунка можно менять.
jQuery(‘.hidden-block’).jScrollPane(
{ verticalDragMinHeight: 70,
verticalDragMaxHeight: 70 }
);
});
Число 70 стоит для примера.
Доброго времени суток, спасибо за статью. Но не все вышло почему то, всё подключил, класс нужного блока прописал, в итоге скрылся системный скролл и вместо него не появился никакой скролл вообще. Понимаю что вина моя но разобраться не могу(
Добрый день. скиньте ваш код на //jsfiddle.net, т.к. не видя его я не могу вам подсказать
//jsfiddle.net/Lkaq41hh/3/ тут все, еще скажу что если изменить количество текста в скачаном index.html то скролл пропадает тоже. Буду признателен за помощь.
заработал плагин только когда обернул текст в текст . но к блоку добавился класс jspScrollable и блок перестал “слушаться” бутстрап
обернул текст в “p”
сделайте такую разметку
<div class=”col-sm-6″>
<div class=”terms_text”>
<p>Ваш текст</p>
</div>
</div>
Спасибо что откликнулись, но ничего не поменялось
получается что скрип присваивает блоку определенную ширину и не меняет ее а это в данном случае не приемлемо, при чем присваивает ее в обход css
Не работает Ваш скрипт
Скрипт не мой ))
Посмотрел демо-пример, все там работает, скорее всего вы что-то упустили.
С динамической шириной.
$(‘#wrapper’).jScrollPane({
autoReinitialise: true
});
#wrapper {
width: 100%;
}