Доброго времени суток всем!
Начну с предистории. Когда мне надо решить какую либо задачу, я начинаю ее гуглить. Иногда быстро, иногда медленно я нахожу решение. И когда я его нашел, я думаю о том, сколько я времени потратил на данную задачу. Так вот, в данном туториале, я хочу сократить время, потраченное девелоперами...
Также возвращаясь к предыдущему моему посту о каруселях, данный туториал будет как-никогда актуален.
Речь пойдет о колесике мышки. Заставим его крутиться. Самый яркий пример использования колесика это Гугл Мапс, там оно используется для масштабирования. Также очень хорошо колесо используется для гугл-ридера.
Итак...
Кручение колеса - это ивент, его надо приатачить к какому либо обьекту, в нашем случае это div. Вся проблема в том, что название этих ивентов в разных браузерах разные. В IE это событие называется onmousewheel, а в FireFox называется DOMMouseScroll.Opera в свою очередь использует название IE только без приставки on, тоесть mousewheel. Но Opera атачит ивенты как FireFox, а не как IE.
Есть две отличные функции, которые атачат и деатачат ивенты к html-элементам, но предварительно эти элементы надо снабдить id.
function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.addEventListener)
{
if(eventName == 'mousewheel')
{
element.addEventListener('DOMMouseScroll',
callback, false);
}
element.addEventListener(eventName, callback, false);
}
else if(element.attachEvent)
element.attachEvent("on" + eventName, callback);
}
function unhookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.removeEventListener)
{
if(eventName == 'mousewheel')
{
element.removeEventListener('DOMMouseScroll',
callback, false);
}
element.removeEventListener(eventName, callback, false);
}
else if(element.detachEvent)
element.detachEvent("on" + eventName, callback);
}
Посредством этих функций, можно приатачить любое событие к любому элементу. Может возникнуть вопрос, что при использовании Firefox/Opera/Safari мы атачим два события сразу (и DOMMouseScroll и mousewheel). Это не беда, так как это никак не повлияет на работу...
Но приатачить событие колесика мыши это всего лишь пол беды, главное впереди.
После атача, нам необходимо забрать значение вращения колеса. Тоесть вперед или назад (например zoom в гугл мапс).
Есть два пути, как сделать это: detail (для Firefox и Opera), а также wheelData (для Internet Explorer, Safari, и Opera). Opera по некоторым причинам включает в себя и тот и другой путь.
Функция которая будет возвращать нам значения, должна выглядеть примерно так:
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail : e.wheelData;
//js код
}
Вроде бы все, но тут есть несколько подводных камней.
Например значение 3 для FireFox и Opera в detail равняется значению 120 в WheelData для Internet Explorer или Safari. Также скролл вниз это положительное число для detail, но отрицательное число для WheelData. Это может быть легко пофикшено немного модифицируя нашу функцию.
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
//js код
}
Следующий шаг будет остановка скроллинга страницы при скроллинге html-элемента.
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
Если мы остановили скролл, значит страница скроллится не будет.
Для этого можно модифицировать нашу функцию следующим образом.
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
//js код
return cancelEvent(e);
}
Теперь мы имеем все функции, необходимые нам для организации скролла над каким-то элементом. Все предельно просто и ясно.
Организуем некоторый div.
Ниже опишем наглядную функцию для деммонстрации всего выше перечисленного
function printInfo(e)
{
e = e ? e : window.event;
var raw = e.detail ? e.detail : e.wheelDelta;
var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;
document.getElementById('scrollContent').innerHTML =
" Raw Value: " + raw +
" Normalized Value: " + normal;
cancelEvent(e);
}
hookEvent('scrollContent', 'mousewheel', printInfo);
Вот впринципе и все. Теперь можно данный скролл прикрутить к карусели, к гугл мапсу, к ридеру, к счетчику или к чему-либо.
Люблю хорошие и простые туториалы.
Данный туториал написан не мною (а жаль), это всего лишь перевод. Но я считаю, что опубликовав его здесь, я добьюсь поставленной цели укоротить время, потраченное девелоперами на поиск решения по данному вопросу.
Данный туториал был найден благодаря:
1) http://forum.dklab.ru/
2) http://adomas.org/javascript-mouse-wheel/
3) http://blog.paranoidferret.com/index.php/2007/10/31/javascript-tutorial-...
На последней ссылке можно посмотреть данное решение в действии, перевод был взят оттуда же.
Всем спасибо!
