Плагин jScrollPane JQuery

02012-06-231391022Денис Абдуллин

Это самый лучший плагин скроллинга JQuery. У него есть масса преимуществ, и, кстати, сегодня у плагина масса возможностей. На Урааа этот плагин тоже используется. Вместе с ним в комплекте прилагается плагин Mousewheel JQuery. Если использовать только плагин jScrollPane JQuery, колесико на мышке работать не будет, нужен плагин Mousewheel. Скроллинг можно делать не только вертикальный, но и горизонтальный. Замена полосы прокрутки – это не такая уж и сложная работа, всего пару кодов и готово.

В данной версии плагина исправлен скроллинг на сенсорных устройствах. Проблема была в том, что вместо нужно скроллинга, скроллировалась вся страница. Это наблюдалось как в iPhone и iPad, так и, например, в Android. Теперь на iPhone, iPad и Android плагин jScrollPane JQuery работает нормально.

Подключение JQuery, плагина jScrollPane и плагина Mousewheel (в секцию HEAD)

Code

Подключение CSS файла

Code

Код CSS (для элемента со скроллингом)

Code

.scrollblock {
overflow:auto;
width:400px; // Ширина блока
height:500px; // Длина блока
}

Код HTML

Code

<div class="scrollblock">
<div>
  ...
  Содержимое
  ...
</div>
</div>

Код JavaScript

Code

Несколько полезных дополнений для вызова jScrollPane:

Code

Стиль стрелок нужно продумать самостоятельно, в этом примере они не используются. Дополнений гораздо больше, чем представлено здесь.

Демо страница

Скачать

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

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

Порядок вывода комментариев:

Oleg 2014-08-14 в 23:33 / МатериалСпам

А если я хочу использовать горизонтальный скролл, что для этого необходимо поправить?

Гость 2013-09-04 в 15:49 / МатериалСпам

везде он работает. а для чата пора бы уже WebSocket юзать, а не фреймы.

Гость 2013-07-19 в 23:39 / МатериалСпам

В Mozila не работает

Гость 2013-07-12 в 18:51 / МатериалСпам

У меня не работает! Я 3 часа сидел пытался подключал все различные яваскрипты но не фига!. Скроллинг отображается но он стандартный!

moicrosoft 2016-05-23 в 13:59 / МатериалСпам

это можно сделать и без js а спомащью свойства ::-webkit-scrollbar

Гость 2012-12-11 в 18:42 / МатериалСпам

а как его установить ?
для меню!!

Гость 2012-11-02 в 22:15 / МатериалСпам

Спасибо огромное! Работает без проблем. Спасибо что Вы есть.

Ruslan Saharuck 2012-08-16 в 23:51 / МатериалСпам

PZD'c, комментики сверху...

Гость 2012-06-25 в 21:24 / МатериалСпам

Я смог вбухать прокрутку в чат, статистику, материалы и т.д. Это довольно трудно было! Баг заметил, если CTRL + R нажать то в чате прокрутка полностью до низа не прокручивается((( А как авто обновление чата срабатывает все в норму приходит :)

Денис Абдуллин 2012-06-25 в 20:55 / МатериалСпам

как раз таки для iframe нельзя.

Денис Абдуллин 2012-06-25 в 20:56 / МатериалСпам

Код есть, я как раз старался писать, чтобы легко было вставить в чат. У меня тот же скроллинг в чате здесь, код я отсюда же в материал и вставил. Все понятно написано

Александр Столяров 2012-06-25 в 18:56 / МатериалСпам

как для чата сделать? У меня чат не через iframe.

илья дементьев 2012-06-24 в 20:33 / МатериалСпам

Saha, ДАВАЙДОСВИДАНИЯ

Филипп 2012-06-24 в 20:10 / МатериалСпам

хахаха

Александр 2012-06-24 в 17:53 / МатериалСпам

Ilia, Ты какой то озабоченный, пойдука я лучше отсюда.

Александр 2012-06-24 в 15:16 / МатериалСпам

Ilia, у тебя, да.

Кирилл Косырев 2012-06-24 в 15:29 / МатериалСпам

Saha, xD

илья дементьев 2012-06-24 в 16:01 / МатериалСпам

Saha, а у тебя вижу из более интимного места?

илья дементьев 2012-06-24 в 14:24 / МатериалСпам

Saha, а фарма добавления сообщений их жопы вылезит? :D

Александр 2012-06-23 в 23:32 / МатериалСпам

Для чата делаем следующее

<div class="scrollblock">
<div>

<iframe style="width:100%;height:600px" frameborder="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="/mchat/"></iframe>

</div>
</div>

Александр Столяров 2012-06-23 в 23:05 / МатериалСпам

У меня проблема есть. Я поставил плагин, работает отлично. Проверял с текстом, но как я подключаю к скрипту, то не чего не работает!

Вот сам скрипт:
[code]<script type="text/javascript">
$(function () {
$('.scroll_user_list').jScrollPane({enableKeyboardNavigation:false});
stats = {
online: function () {
$('#num_online').html($('#onl3').find('b').text());
$.get('/index/62', function (stat) {
users = $('a', $('cmd[p="content"]', stat).text()).size();
list = $('cmd[p="content"]', stat).text();
$('#user_list').empty();
$('a', list).each(function () {
$('#user_list').append('<div class="stat_frame rad_1"><div id="f_l"><a href="' + $(this).attr('href') + '" class="' + $(this).attr('class') + '" style="font-weight:700;">' + $(this).text() + '</a></div><div id="f_r"><a href="/index/14-' + $(this).attr('href').split('-')[1] + '-0-1" class="stat_pm">c</a></div></div>');
});
});
}
};
setInterval(function () {
$('#stats_load').fadeIn().delay(1000).fadeOut();
stats.online();
},
12000);
stats.online();
});
</script>
<div class="scroll_user_list">
<div id="user_list"></div>
</div>
[/code]
Что может быть не так? :(
Подскажите...