DIV scroll (plugin)

18.12.2008, 18:07
Рубрика: jquery

Есть разные примеры создания своего скролла для слоя. Но в плагинах для jquery особо ничего примечательного. Посему и родилась идея создать свой плагин, и первый вариант (очень уж сырой) вы можете лицезреть:

Сам plugin pro.scroll.0.1.js и изображения скролла

Пример:

Вот вам интересный скролл (scroll) для слоя (div).

В нестандартном графическом виденье.

jQuery, как обычно, неоценимая помощь.

jQuery - forever!

скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл,
скролл,
скролл,
скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл, скролл......

Немного комментариев

В переменной options стандартные параметры, заменяемые при вызове плагина. Ничего сверхъестественного.

bar – html бегунка
scrollbar – html самого скролла, с кнопками вверх/вниз, и бегунком
divscroll – сам слой со скроллом

По началу, для определения высоты всего текста использовалось $("#scrolling_content").css('height'), но оказалось, что IE, в отличии от Opera и FireFox, устанавливает по умолчанию параметр “auto”. На смену нашлась более интересная кроссбраузерная функция $("#scrolling_content").innerHeight()

Далее идут некоторые вычисления высоты бегунка (см. заключение), в соотношении с размером текста. И выставлении его размера

$("#barheight").css({
'height' : barcur
});

При наведении мышкой на кнопку (mouseover) вниз, нужно передвигать бегунок и текст:

$("#barheight").animate({marginTop: bartop+"px"}, 1500)
$("#scrolling_content").animate({"top": texttop+"px"}, 1500);

bartop и texttop максимальное перемещение по оси Y (top) для бегунка и текста соответственно. При нажатии верхней кнопки, bartop и texttop устанавливаются в 0.

И только мышь уходит с кнопки (mouseout), сразу же останавливаем все движения:

$("#scrolling_content").stop();
$("#barheight").stop();

Далее нужно все таки передвигать бегунок. Устанавливаем обработчик на нажатие кнопки мыши (mousedown) при наведении на бегунок и после этого обработчик на передвижении мыши (mousemove) по всему документу(!). Получается передвижение при нажатой кнопке.

$("#barheight").bind("mousedown", function(e) {
...
$("body").bind("mousemove", function(e) {

Еще одни вычисления (см. заключение) координат и само перемещение, только не анимированное:

$("#barheight").css({
    marginTop: _margintop
});
...
$("#scrolling_content").css({
    "top": _margintop
});

А далее единоразовый обработчик на отпуск кнопки мыши (mouseup) и удаление обработчика передвижения (mousemove)

$("body").unbind("mousemove");

Все завершаем ложно, дабы избежать выделения текста.

Текущий пример:

<div id="scrolling">
<p>Вот вам интересный скролл (scroll) для слоя (div).</p>
<p>В нестандартном графическом виденье.</p>
<p>jQuery, как обычно, неоценимая помощь.</p>
<h2>jQuery - forever!</h2>
</div>

По вычислению

var divpos = $(this).position().top; // текущая Y-позиция слоя
var textheight = parseInt($("#scrolling_content").innerHeight()); // размер текстового блока по высоте

barcurtop = parseInt($("#barheight").css('marginTop'));
barcurtop = (isNaN(barcurtop)?0:barcurtop);
barcurtop = (e.pageY-divpos-barbutton)-barcurtop;
// текущая позиция бегунка

_margintop = (e.pageY-divpos-15)-barcurtop;

if (_margintop>bartop)
{
    _margintop = bartop;
}
    else if (_margintop<0)
{
    _margintop=0;
}
// в зависимости от текущий позиции мыши (e.pageY) вычисления позиции бегунка. И не более (bartop) и не менее (0) возможного.

_margintop = _margintop*texttop/bartop;
// от того, на сколько перемещается бегунок, пропорционально передвигается и текст

Плагин небольшой, но и функций некоторых нет. Например: при нажатии вне бегунка, перемещать его. Или при скроллинге мышью. Или установка горизонтального скролла. И т.д. и т.п. Можно написать еще тучу.

И еще, этот плагин очередной раз показал неадекватность IE к javascript. К сожалению.

Ссылки по теме:

18.09.2009 - DIV scroll v0.2

05.09.2009 - Подсказки v0.2 (proTips plugin)

18.12.2008 - DIV scroll (plugin)

10.12.2008 - Подсказки с помощью jQuery (plugin)

Комментарии

mechanic (03.03.2010, 14:24:34) пишет:

А как регулировать скорость прокрутки? Или это невозможно?

Nagor (23.01.2010, 14:45:02) пишет:

Спасибо! Немного подшаманил и вполне нормально работает. Правда, кажется есть баг:
когда тащишь ползунок мышью снизу вверх и в конце трассы курсор остается на ползунке (mouseover) сбрасывается положение: перематывается вниз все. Если мышь удерживать и вывести за ползунок (mouseout) - все ок

Александр (10.12.2009, 17:21:14) пишет:

Ребят, как этим вообще пользоваться-то?
==========
<html>
<title>jQuery_Scrolling</title>
<head>
<script src=″http:.../jq/jquery.js″></script>
<script scr=″.../jq/pro.scroll.js″></script>
<script type=″text/javascript″>

$(document).ready(function(){
$(″.child_content″).scroll();

});

</script>

</head>
<body>
<div class=″child_content″ >
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
test phrase to scroll<br>
</div>

</body>
</html>
==================
А в результате ноль. ничего не скролится.

dagaz (11.10.2009, 04:34:58) пишет:

Всё хорошо. как вот только задаватьпараметры ширины и высоты самому и место положения слоя?
Например, 400 на 300 с отступом 600 сверху и 10 слева?

Ответ:

$(″#scrolling″).scroll({
width: 400,
height: 300
});

а вот с отступами, и вообще расположением, пользуейтесь CSS

hangover (10.09.2009, 22:21:26) пишет:

Вроде бы помог )

Ответ:

вроде рад :)

pirate (02.08.2009, 20:40:19) пишет:

Благодарю за скрипт, очень помог

Ответ:

Это радует.

jQuery Scroll
jquery scroller
jquery scroll div
jquery scrollbar
scroll jQuery
jquery scroll plugin
div scroll
jquery div scroll
jquery скролл
scrollbar jquery
scroll div
скроллинг div
скролл jquery
div со скроллом
scroll div jquery
jquery scrolling
javascript scroll
jquery div scrolling
div scrollbar
scroll javascript
jquery scrollbar plugin
jquery scrolling div
jquery scrollable div
javascript scroll div
нестандартный скролл
scrolling div
скролл на jquery
горизонтальный скролл jquery
jquery передвижение мышкой
jquery скроллинг
div со скролом
javascript скроллинг div
javascript div scroll
div scroll jquery
div скроллинг
div скролл
div scrolling
jquery скроллинг div
скрол div
jquery animate scroll
pro.scroll.0.1.js
горизонтальный скроллинг jquery
scroll div javascript
скролл html
jquery горизонтальный скролл
javascript скролл
div скрол
jquery scrolling plugin
html скролл
свой скролл