Плагин jScrollPane JQuery

Плагин jScrollPane JQuery

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

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

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

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

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript" src="jquery.jscrollpane.js"></script>  
<script type="text/javascript" src="jquery.mousewheel.js"></script>

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

Code
<link rel="stylesheet" type="text/css" href="jscrollpane.css" />

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

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

Код HTML

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

Код JavaScript

Code
<script type="text/javascript">
$(function()
{
  $('.scrollblock').jScrollPane();
});
</script>

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

Code
<script type="text/javascript">
$(function()
{
  $('.scrollblock').jScrollPane(
{
showArrows: true, // показывать стрелки
arrowScrollOnHover: true, // скроллинг при наведении на стрлки
enableKeyboardNavigation: false, // запрет управления с клавиатуры
hideFocus: true // скрывает outline при фокусе
}
);
});
</script>

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (22)
Oleg 2014-08-14 в 23:33 / МатериалСпам
А если я хочу использовать горизонтальный скролл, что для этого необходимо поправить?
0
Гость 2013-09-04 в 15:49 / МатериалСпам
везде он работает. а для чата пора бы уже WebSocket юзать, а не фреймы.
0
Гость 2013-07-19 в 23:39 / МатериалСпам
В Mozila не работает
0
Гость 2013-07-12 в 18:51 / МатериалСпам
У меня не работает! Я 3 часа сидел пытался подключал все различные яваскрипты но не фига!. Скроллинг отображается но он стандартный!
0
moicrosoft 2016-05-23 в 13:59 / МатериалСпам
это можно сделать и без js а спомащью свойства ::-webkit-scrollbar
0
Гость 2012-12-11 в 18:42 / МатериалСпам
а как его установить ?
для меню!!
0
Гость 2012-11-02 в 22:15 / МатериалСпам
Спасибо огромное! Работает без проблем. Спасибо что Вы есть.
0
Ruslan Saharuck 2012-08-16 в 23:51 / МатериалСпам
PZD'c, комментики сверху...
0
Гость 2012-06-25 в 21:24 / МатериалСпам
Я смог вбухать прокрутку в чат, статистику, материалы и т.д. Это довольно трудно было! Баг заметил, если CTRL + R нажать то в чате прокрутка полностью до низа не прокручивается((( А как авто обновление чата срабатывает все в норму приходит :)
0
Денис Абдуллин 2012-06-25 в 20:55 / МатериалСпам
как раз таки для iframe нельзя.
0
Денис Абдуллин 2012-06-25 в 20:56 / МатериалСпам
Код есть, я как раз старался писать, чтобы легко было вставить в чат. У меня тот же скроллинг в чате здесь, код я отсюда же в материал и вставил. Все понятно написано
0
Александр Столяров 2012-06-25 в 18:56 / МатериалСпам
как для чата сделать? У меня чат не через iframe.
0
илья дементьев 2012-06-24 в 20:33 / МатериалСпам
Saha, ДАВАЙДОСВИДАНИЯ
0
Филипп 2012-06-24 в 20:10 / МатериалСпам
хахаха
0
Александр 2012-06-24 в 17:53 / МатериалСпам
Ilia, Ты какой то озабоченный, пойдука я лучше отсюда.
0
Александр 2012-06-24 в 15:16 / МатериалСпам
Ilia, у тебя, да.
0
Кирилл Косырев 2012-06-24 в 15:29 / МатериалСпам
Saha, xD
0
илья дементьев 2012-06-24 в 16:01 / МатериалСпам
Saha, а у тебя вижу из более интимного места?
0
илья дементьев 2012-06-24 в 14:24 / МатериалСпам
Saha, а фарма добавления сообщений их жопы вылезит? :D
0
Александр 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>
0
Александр Столяров 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]
Что может быть не так? :(
Подскажите...
0
Гость 2012-06-23 в 22:09 / МатериалСпам
А как делать что бы работал в чате?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.