Плагин jScrollPane JQuery
Это самый лучший плагин скроллинга JQuery. У него есть масса преимуществ, и, кстати, сегодня у плагина масса возможностей. На Урааа этот плагин тоже используется. Вместе с ним в комплекте прилагается плагин Mousewheel JQuery. Если использовать только плагин jScrollPane JQuery, колесико на мышке работать не будет, нужен плагин Mousewheel. Скроллинг можно делать не только вертикальный, но и горизонтальный. Замена полосы прокрутки – это не такая уж и сложная работа, всего пару кодов и готово.
В данной версии плагина исправлен скроллинг на сенсорных устройствах. Проблема была в том, что вместо нужно скроллинга, скроллировалась вся страница. Это наблюдалось как в iPhone и iPad, так и, например, в Android. Теперь на iPhone, iPad и Android плагин jScrollPane JQuery работает нормально.
Подключение JQuery, плагина jScrollPane и плагина Mousewheel (в секцию HEAD)
<script type="text/javascript" src="jquery.jscrollpane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
Подключение CSS файла
Код CSS (для элемента со скроллингом)
overflow:auto;
width:400px; // Ширина блока
height:500px; // Длина блока
}
Код HTML
<div>
...
Содержимое
...
</div>
</div>
Код JavaScript
$(function()
{
$('.scrollblock').jScrollPane();
});
</script>
Несколько полезных дополнений для вызова jScrollPane:
$(function()
{
$('.scrollblock').jScrollPane(
{
showArrows: true, // показывать стрелки
arrowScrollOnHover: true, // скроллинг при наведении на стрлки
enableKeyboardNavigation: false, // запрет управления с клавиатуры
hideFocus: true // скрывает outline при фокусе
}
);
});
</script>
Стиль стрелок нужно продумать самостоятельно, в этом примере они не используются. Дополнений гораздо больше, чем представлено здесь.
