Укрощаем колесо мыши и создаем полноценный scroll bar средствами JavaScript. понедельник
25 августа

Вступление

Все началось с маленькой неподвижной html-заготовки:

<div id="content">
    <!-- Полоса прокрутки с ползунком -->
    <div id="scrollbar">        
        <img id="scroller" style="left: 0px;" alt="" src="scroller.gif" />
        <!-- Бегунок мы будем перемещать по полосе задавая css-параметр left -->
    </div>
    <!-- Таблица, которая будет перемещаться при перемещении ползунка -->
    <table class="js_menu" style="margin-left: 0px;" id="content">
        <tr>
            <!-- Некоторое содержание таблицы -->
        </tr>
    </table>
    <!-- Перемещать ее мы будем задавая параметр margin-left, причем значения в нем должны быть отрицательные -->
</div>
.scrolling_line img 
{
    position: absolute;
}
.content
{
    overflow:hidden;
}
</style>

Таблица будет шире, чем блок content, поэтому ее часть будет скрыта. Изменяя ее сдвиг (margin-left), мы будем двигать ленту ячеек, визуально создавая эффект прокрутки.

Вот такую html-заготовку использовал я:

Те, кому интересны все детали, могут взять FireBug и выяснить все подробности, а я продолжу свой рассказ.

На старт, внимание, марш!

Сделаем заготовку скрипта, в которой получим все необходимые элементы и их параметры:

function get(id)
{
    return document.getElementById(id);
}

var scroller = get('scroller');
var scrollerBar = get('scroller_bar');
var object = get('object');
var content = get('content');

// Ширина видимой части объекта (в нашем случае — таблицы)
var objectWidth = content.offsetWidth; 

// Ширина объекта целиком
var objectTrackWidth = menu.offsetWidth; 

// Ширина ползунка
var scrollerWidth = Math.round( (objectWidth * scrollerTrackWidth) / objectTrackWidth );

// Учтем, что максимальная ширина ползунка - это ширина полосы прокрутки
scrollerWidth = (scrollerWidth > scrollerTrackWidth) ?  scrollerTrackWidth : scrollerWidth;

// Устанавливаем ширину ползунка
scroller.style.width = scrollerWidth + "px";

// На каждый пиксель сдвига бегунка мы будем сдвигать меню на величину delta
var delta = objectTrackWidth / scrollerTrackWidth;

Заметим, что ползунок все еще неподвижен, но его ширина уже пропорциональна общей ширине меню.

Тащи-бросай (drag&drop;)

Перетаскивание ползунка подразумевает 3 события: захватить, перетащить и бросить, которые мы сейчас и реализуем:

// Захватить
scroller.onmousedown = drag;

// Перетащить
window.onmousemove = move;

// Бросить
window.onmouseup = drop;

// Эта переменная нам поможет определить:
// Мы просто двигаем мышью по экрану или все-таки перетаскиваем ползунок
var canDrag = false;

// Здесь будем хранить начальный сдвиг ползунка
var shift_x;    

function drag(event)
{
    if (!event)
    {
        // Всем известно, что в Mozilla event передается как параметр
        // А в IE его можно получить вот так:
        event = window.event;
    }
    
    // Отметим, что мы захватили ползунок.
    // Теперь при сдвиге мыши, ползунок должен сдвинуться вместе с ней
    canDrag = true;
    
    // А так же запомним начальный сдвиг
    shift_x = event.clientX - parseInt(scroller.style.left);
    return false;
}

function move(event)
{
    if (!event)
    {
        event = window.event;
    }
    // Здесь мы как раз и проверяем:
    // Сдвигать ли нам ползунок вслед за мышью, или оставить его неподвижным
    if (canDrag)
    {
        setPosition(event.clientX - shift_x);
    }
    return false;
}

function drop()
{
    // Освобождаем ползунок
    canDrag = false; 
}

function setPosition(newPosition)
{
    // Проверим не выйдет ли наш ползунок за границы полосы прокрутки
    // Заметим что предельной точкой справа является разность ширины полосы прокрутки и ширины ползунка
    // Ведь мы устанавливаем позицию его левой границы
    if ( (newPosition <= scrollerTrackWidth - scrollerWidth) && (newPosition >= 0) )
    {
        scroller.style.left = newPosition + "px";
    }
    else if (newPosition > scrollerTrackWidth - scrollerWidth)
    {
        scroller.style.left = scrollerTrackWidth - scrollerWidth + "px";
    }
    else
    {
        scroller.style.left = 0 + "px";
    }
    // Вслед за ползунком передвинем меню:
    menu.style.marginLeft = Math.round( parseInt(scroller.style.left)  * delta * (-1) ) + "px";
    return false;
}

Замечание: как говорилось ранее, в параметр margin-left будем задавать отрицательные значения, для этого мы добавили умножение на -1.

Все вроде хорошо, в Opera 9 все прекрасно работает, но в FF, IE и Safari есть некоторые недочеты, которые вы можете оценить сами. Один из самых нежелательных эффектов я заметил в надстройке MyIE2.0 к обычному IE. В нем каждый раз при перетаскивании позунка открывалась новая вкладка с картинкой ползунка, который мы перетаскивали.

Все нежелательные эффекты мы устраним добавив функцию BlockEvent():

function blockEvent(event)
{
    if (!event)
    {
        event = window.event;
    }
    if(event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
    if(event.preventDefault) event.preventDefault();
    else event.returnValue = false;
}

Она предотвращает «высплытие» события наружу, тем самым подавляет все нежелательные эффекты.
Вызывать ее следует:

function drag(event)
{
    if (!event)
    {
        event = window.event;
    }
    canDrag = true;
    shift_x = event.clientX - parseInt(scroller.style.left);
    // Здесь:
    blockEvent(event);
    return false;
}

function move(event)
{
    if (!event)
    {
        event = window.event;
    }
    if (canDrag)
    {
        setPosition(event.clientX - shift_x);
        // И здесь:
        blockEvent(event);
    }
    return false;
}

Добавив всего одну функцию, мы убили все ненужные эффекты:

Wheel'ы

Когда дело дошло до обработки события колеса мыши, я наткнулся на вилы: у каждого браузера были свои предпочтения по поводу обработки данного события.

Первой мыслью было использование события onScroll, однако оно существует только в IE и только при наличии на странице активной полосы прокрутки. Событие onMouseWheel же обрабатывается в IE, Opera и Safari, однако в каждом браузере по-своему, но в Mozilla, к сожалению, нет и этого события.

Пришло время разложить все по полочкам и, наконец, подробно разобрать обработку события колеса мыши.

Начнем с инициализации события:

  // Инициализация обработчика колеса мыши, повесим его только на слой content 
  // Для Mozilla необходимо создать EventListener:
  if (get('content').addEventListener)
  {
      get('content').addEventListener('DOMMouseScroll', wheel, false);
  }
  // Для всех остальных браузеров подойдет вот такая инициализация:
  get('content').onmousewheel = wheel;

Поймали событие — полдела позади, осталось разобрать все тонкости его обработки:

function wheel(event)
{
    // Переменная, в которой будем хранить сдвиг
    var wheelDelta = 0;
    
    // Шаг меню при прокрутке
    var step = 300;
    if (!event) 
    {
        event = window.event;
    }
    if (event.wheelDelta) 
    {
        // В IE и Opera при сдвиге колеса на один шаг event.wheelDelta принимает значение 120
        // Значения сдвига в этих двух браузерах совпадают по знаку.
        wheelDelta = event.wheelDelta/120;
    } 
    else if (event.detail) 
    {
        // В Mozilla, значение wheelDelta отличается по знаку от значения в IE.
        // Сдвиг колеса на один шаг соответствует значению 3 параметра event.detail          
        wheelDelta = -event.detail/3;
    }
    // При скроллинге вверх wheelDelta > 0
    // При скролинге вниз - wheelDelta < 0
    if (wheelDelta)
    {
        var currentPosition = parseInt(scroller.style.left);               
        var newPosition = wheeldelta*step + currentPosition;
        setPosition(newPosition); 
    }
    
    // Убиваем событие (чтобы страница не скроллилась)
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
    blockEvent(event);
}

Так же внеся некоторые изменения в код мы можем организовать вертикальный скроллинг:

Внесем изменения в самое начало скрипта:

// Ширина видимой части объекта (в нашем случае — таблицы)
// Не стал менять название переменной, просто получил в нее значение высоты
var objectWidth = content.offsetHeight; 

// Ширина объекта целиком
// Аналогично
var objectTrackWidth = menu.offsetHeight; 

// Устанавливаем высоту ползунка
scroller.style.height = scrollerWidth + "px";

Внесем изменения в функции drag(), move() и setPosition():

function drag(event)
{
    if (!event)
    {
        // Всем известно, что в Mozilla event передается как параметр
        // А в IE его можно получить вот так:
        event = window.event;
    }
    
    // Отметим, что мы захватили ползунок.
    // Теперь при сдвиге мыши, ползунок должен сдвинуться вместе с ней
    canDrag = true;
    
    // А так же запомним начальный сдвиг
    shift_x = event.clientY - parseInt(scroller.style.top);
    return false;
}

function move(event)
{
    if (!event)
    {
        event = window.event;
    }
    // Здесь мы как раз и проверяем:
    // Сдвигать ли нам ползунок вслед за мышью, или оставить его неподвижным
    if (canDrag)
    {
        setPosition(event.clientY - shift_x);
    }
    return false;
}

function setPosition(newPosition)
{
    // Проверим не выйдет ли наш ползунок за границы полосы прокрутки
    // Заметим что предельной точкой справа является разность ширины полосы прокрутки и ширины ползунка
    // Ведь мы устанавливаем позицию его левой границы
    if ( (newPosition <= scrollerTrackWidth - scrollerWidth) && (newPosition >= 0) )
    {
        scroller.style.top = newPosition + "px";
    }
    else if (newPosition > scrollerTrackWidth - scrollerWidth)
    {
        scroller.style.top = scrollerTrackWidth - scrollerWidth + "px";
    }
    else
    {
        scroller.style.top = 0 + "px";
    }
    // Вслед за ползунком передвинем меню:
    menu.style.marginTop = Math.round( parseInt(scroller.style.top)  * delta * (-1) ) + "px";
    return false;
}