Управление прокруткой с помощью JavaScript

Есть такое полезное средство в JavaScript... Сегодня мы и поговорим о том, как им пользововаться, да обсудим некоторые способы его практического использования.

Бывает, что иногда стандартная виндозная полоса прокрутки портит внешний вид страницы (если, например, это презентационный насыщеный графикой сайт). В этом случае можно создать альтернативную прокрутку с помощью несложного JavaScript-скрипта.

Однако учтите, что удобней, чем стандартная, она вряд ли будет (хотя, кто знает...), но красивей — это уж наверняка!

Если вас это устраивает, приступим. Во-первых...

Функции управления прокруткой

Их есть у нас две: scrollBy(x,y) и scrollTo(x,y), где x и y — это, соответственно, горизонтальное и вертикальное смещение прокрутки. Но это, впрочем, не совсем функции, это методы — функции, которые пренадлежат объекту (в данном случае, объектами могут выступать: window, frame и iframe). Тоесть, вызов этих функций имеет такой вид (ссылка для прокрутки текущего окна на верх страницы — наверх):

<a href="javascript:window.scrollTo(0,0);">наверх</a>

Вот вам, кстати уже и первый пример практического использования.

Также вызов можно помещать в функции и обращаться к объектам при помощи имён (ну, как обычно):

// прокрутка фрейма с именем 'main' на 100 пунктов:
document.frames['main'].scrollBy(0,100); 

// прокрутка родительского окна на начало:
window.parent.scrollTo(0,0);

Практическое применение

Итак, теперь небольшой пример практического использования сегодняшних знаний. Создадим удобное окошко для просмотра какой-нибуть информации с применением альтернативной прокрутки.

Во-первых, создадим само окно на основе iframe. Для него средствами стандартного HTML надо будет убрать полосы прокрутки, рамку (чтобы при необходимости создать свою), а также установить размеры самого окна:

<iframe width=200 height=120 
scrolling="no" frameborder="no" 
src="YOURPAGE.HTML" id="textw"></iframe>

А теперь — скриптовая часть. Опредилим две функции, для прокрутки, собственно, вверх и вниз. Параметром ей будем передавать количество пикселей для прокручивания:

function scrollUp(s)
{
  document.frames['textw'].scrollBy(0,-s);
}

function scrollDown(s)
{
  document.frames['textw'].scrollBy(0,s);
}

Свойство можно назначить на события, скажем, наведения и убирания курсора мыши на изображении. Вот так, например:

<img src="down.gif" 
onmouseover="t=setInterval('scrollDown(1);',30);" 
onmouseout="clearInterval(t);">

Таким образом получится, что при наведении курсора нарисованную вами на стрелку “вниз”, страница в окошке будет периодически прокручиваться на один пиксель вниз с интервалом в 30 мс. Для настройки скорости, эти параметры можно менять. Также можно вынести несколько стрелок с разными скоростями для регулирования скорости прокрутки самим пользователем. Вообщем, сама навороченность устройства ограничена только вашей фантазией...

Вот что получилось у меня (подвигайте курсор вдоль зелёной стрелки):

Вы, конечно же, сможете сделать и лучше, например вынести ещё информацию о текущем состоянии прокрутки (в виде бегунка, как все привыкли, или как-нибуть по-другому)... Но для этого надо будет вводить дополнительную переменную состояния, и увеличивать её (или уменьшать) при каждом проходе функции скроллинга...

В общем, дерзайте, удачи в скриптовании,
...и, как всегда, если что — стучите в ящик...

10.08.2003