Кроссбраузерная обработка прокрутки колеса мыши (mousewheel)

Недавно наткнулся на маленькую проблемку, в одном из последних проектов нужно было прикрепить событие mousewheel, причем код должен был быть написан без сторонних фреймверков. Когда попытался повесить функцию на onmousewheel, убедился, что она работает по разному в некоторых браузерах, а в иных и вовсе не работает.

В этой статье я хочу поделится с вами функциями на JavaScript для кроссбраузерного события скролинга. Покопавшись в интернете нашел несколько неплохих идей, но почти все они были полуфабрикатами. Поэтому, собрав определенную коллекцию различных решений – вывел и оптимизировал их в одну легкую в использовании функцию, а что самое главное – универсальную.

Код: Выделить всё

// Основная Функция mousewheel
function wheel(event){
        var delta = 0;
        if (!event) event = window.event; // Событие IE.
        // Установим кроссбраузерную delta
        if (event.wheelDelta) { 
                // IE, Opera, safari, chrome - кратность дельта равна 120
                delta = event.wheelDelta/120;
        } else if (event.detail) { 
                // Mozilla, кратность дельта равна 3
                delta = -event.detail/3;
        }
        // Вспомогательня функция обработки mousewheel
        if (delta && typeof handle == 'function') {
                handle(delta);
                // Отменим текущее событие - событие поумолчанию (скролинг окна).
                if (event.preventDefault)
                        event.preventDefault();
                event.returnValue = false; // для IE
        }
}

// Инициализация события mousewheel
if (window.addEventListener) // mozilla, safari, chrome
    window.addEventListener('DOMMouseScroll', wheel, false);
// IE, Opera.
window.onmousewheel = document.onmousewheel = wheel;

Функция wheel в коде является основной, но внутри себя она имеет не менее важную функцию handle, которая выполняет основные действия на странице в зависимости от полученной переменной delta. Пока handle является виртуальной функцией, но в зависимости от нужных нам действий мы будем присваивать ей реальные.

Теперь рассмотрим как же применить эти функции в примерах.

Пример 1: изменение ширины элемента с помощью колесика мышки
demo (внешка)

Код: Выделить всё

function initScript()
{
    var _container = document.getElementById('main-container');
    var _el = document.getElementById('element');
    var _elWidth = 250;
    // Инициализация вспомогательной функции
    _container.onmouseover = function(){
       handle = over;
    };
    // Удаление вспомогательной функции
    _container.onmouseout = function(){
       handle = null;
    }
     
    function over(delta) {
       // получаем delta из основной функции и по результатам
       // выполняем соответствующие действия,
       // в нашем примере изменяем ширину       
       if (delta > 0) _elWidth += 5;
       else _elWidth -= 5;
            
        if (_elWidth < 0) _elWidth = 0; // минимальная ширина
        if (_elWidth > 500) _elWidth = 500; // максимальная ширина
        _el.style.width = _elWidth+'px';
    }
}
if (window.addEventListener)
    window.addEventListener("load", initScript, false);
else if (window.attachEvent)
    window.attachEvent("onload", initScript);

Пример 2: изменение размера шрифта
demo (внешка)

Код: Выделить всё

function initScript()
{
    var _container = document.getElementById('main-container');
    var _elFontSize = 12;
    // Инициализация вспомогательной функции
    _container.onmouseover = function(){
       handle = over;
    };
    // Удаление вспомогательной функции
    _container.onmouseout = function(){
       handle = null;
    }
     
    function over(delta) {
       // получаем delta из основной функции и по результатам
       // выполняем соответствующие действия,
       // в нашем примере изменяем размер шрифта      
       if (delta > 0) _elFontSize++;
       else _elFontSize--;
            
        if (_elFontSize < 8) _elFontSize = 8; // минимальный размер шрифта
        if (_elFontSize > 50) _elFontSize = 50; // максимальный размер шрифта
        _container.style.fontSize = _elFontSize+'px';
    }
}
if (window.addEventListener)
    window.addEventListener("load", initScript, false);
else if (window.attachEvent)
    window.attachEvent("onload", initScript);

Источник: http://markup-javascript.com/2009/05/24 ... skrolinga/