Плагин скроллинга текста внутри блока

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

Код html должен быть минимальным, и в то же время работоспособным в любых ситуациях. Следовательно, он остался тем же: теория скроллинга. В дальнейшем он будет изменяться javascript’ом.

Все что было описано выше, все это я воплотил в jQuery плагине.

Плагин jQuery.BlockScript используется для создания красивого скроллинга внутри блока.

Чтобы начать использовать его для своих целей, нужно иметь структуру, похожую на:

Подключаем скрипты:





После выполнения скрипта, получаем на выходе:

И настраиваем стили для себя:
#navigation{width:300px;overflow:auto;}
#pages{width:100%;white-space:nowrap}
.trackDrag{
height:1px;margin-top:4px;
position:relative;background:#ccc;
}
.arrowDrag{
height:9px;width:45px;margin-top:-4px;
background:#333;position:absolute;
}
.all-cont{}

.trackDrag — полоса прокрутки.
.arrowDrag — ползунок.
.all-cont — весь контент, который прокручивается.

Вот и все. Скроллинг в вашем блоке готов. Однако для удобства и более обширного использования этого плагина, я сделал еще 5 дополнений. Вынес три функции:

1. startDragF: Когда начали тянуть ползунок
2. stopDragF: Когда перестали тянуть ползунок
3. initDragF: Во время перемещения ползунка

Последняя получает значения из скрипта: initDragF(x,m,l,r,k). Что они означают, можно узнать из предыдущей статьи теория скроллинга — javascript.

Еще два дополнения, которые так же полезны.

Параметр DOM (function(){…}) позволит вам сделать какие-то манипуляции с html кодом при загрузке плагина.

Параметр SEL (selector) означает селектор, который станет ровно в центре показываемой области при загрузке страницы.

Пример использования сразу всех параметров:

$(function(){
$('#navigation').BlockScroll({
sel: '.thisp', // Объект привязки для скроллинга при загрузке
DOM: function(){
// Манипуляии с DOM
},
startDragF: function(){
// Перед началом перемещения
},
stopDragF: function(){
// После окончания перемещения
},
initDragF: function(){
// Во время перемещения
},
});
});


Все, скроллинг готов. Осталось на него посмотреть:

Работоспособность скрипта проверялась:
FireFox 2.6.3 «>»
Opera 10.10 linux
Konqueror 4.4.4
Chromium 5.0.375.70

Очень надеюсь на ваши дополнения.