В этой статье я хочу поделится с вами функциями на 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;
Теперь рассмотрим как же применить эти функции в примерах.
Пример 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);
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);