Блог Интернет Технологий

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

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

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

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

Чтобы начать использовать его для своих целей, нужно иметь структуру, похожую на:
<div id="navigation">
<div id="pages">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
</div>
</div>
Подключаем скрипты:
<script type="text/javascript" src="http://bitby.net/wp-demo/files/jquery.js"></script>
<script type="text/javascript" src="http://bitby.net/wp-demo/plugins/BlockScroll/jquery.BlockScroll.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation').BlockScroll();
});
</script>

После выполнения скрипта, получаем на выходе:
<div class="container">
<div id="navigation">
<div id="pages">
<span class="all-cont">Lorem ipsum dolor sit amet, consectetuer <span class="sd">adipiscing</span> elit. Donec condimentum pretium nisl.</span>
</div>
<div class="trackDrag">
<div class="arrowDrag"></div>
</div>
</div>
</div>

И настраиваем стили для себя:
#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

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