JavaScript. Подробное руководство, 6-е издание, стр. 262

Он также включает дополнительную проверку на будущее, чтобы не использовать событие «DOMMouseScroll», если Firefox начнет использовать событие «wheel» или «mousewheel». Обратите внимание, что пример 17.3 также является практическим примером управления геометрией элементов и использования приемов позиционирования средствами CSS, о которых рассказывалось в разделах 15.8 и 16.2.1.

Пример 17.3. Обработка событий «mousewheel»

<b>// Заключает элемент содержимого в фрейм, или видимую область заданной ширины</b>

<b>// и высоты (минимальные размеры 50x50). Необязательные аргументы contentX </b>

<b>// и contentY определяют начальное смещение содержимого относительно кадра.</b>

<b>// (Их значения должны быть &lt;= 0.) Фрейму придается обработчик события mousewheel,</b>

<b>// который позволяет пользователю прокручивать элемент и изменять размеры фрейма, </b>

function enclose(content, framewidth, frameheight, contentX, contentY) {

<b>  // Эти аргументы являются не только начальными значениями: они хранят информацию</b>

<b>  // о текущем состоянии, изменяются и используются обработчиком события mousewheel.</b>

 framewidth = Math.max(framewidth, 50);

 frameheight = Math.max(frameheight, 50);

 contentX = Math.min(contentX, 0) || 0;

 contentY = Math.min(contentY, 0) || 0;

 // Создать фрейм и определить для него стили и имя класса CSS 

 var frame = document.createElement("div");

<b>  frame.className = &quot;enclosure&quot;; // Благодаря этому можно определять стили</b>

 // в таблицах стилей

 frame.style.width = framewidth + "px"; // Установить размеры фрейма,

 frame.style.height = frameheight + "px";

 frame.style.overflow = "hidden"; // Без полос прокрутки

 frame.style.boxSizing = "border-box"; // модель border-box упрощает

 frame.style.webkitBoxSizing = "border-box"; // вычисление новых размеров 

 frame.style.MozBoxSizing = "border-box"; // фрейма.

 // Добавить фрейм в документ и поместить в него элемент elt.

 content.parentNode.insertBefore(frame, content);

 frame.appendChild(content);

 // Координаты элемента относительно фрейма

 content.style.position = "relative";

 content.style.left = contentX + "px";

 content.style.top = contentY + "px";

<b>  // Необходимо решить некоторые проблемы совместимости броузеров</b>

 var isMacWebkit = (navigator.userAgent.index0f("Macintosh") !== -1 &&

 navigator.userAgent.index0f("WebKit") !== -1);

 var isFirefox = (navigator.userAgent.index0f("Gecko") !== -1);

 // Зарегистрировать обработчики событий mousewheel.

 frame.onwheel = wheelHandler; // Для будущих броузеров

 frame.onmousewheel = wheelHandler; // Для большинства текущих броузеров

 if (isFirefox) // Только Firefox

 frame.addEventListener("DOMMouseScroll", wheelHandler, false);

 function wheelHandler(event) {

 var e = event || window.event; // Объект события, стандартный или IE

<b>    // Получить величину прокрутки из объекта события, проверив свойства объекта</b>

 // события wheel, mousewheel (в обоих, 2-мерном и 1-мерном вариантах)

<b>    // и DOMMouseScroll в Firefox.Масштабировать значение так, чтобы один «щелчок»</b>

<b>    // колесика соответствовал 30 пикселам. Если какой-либо из броузеров в будущем</b>

<b>    // будет возбуждать оба типа событий, &quot;wheel&quot; и &quot;mousewheel&quot;, одно и то же</b>

<b>    // событие будет обрабатываться дважды. Но будем надеяться, что отмена</b>

<b>    // события wheel будет предотвращать возбуждение события mousewheel.</b>

 var deltaX = e.deltaX*-30 || // событие wheel

 e.wheelDeltaX/4 || //mousewheel

 0; // свойство не определено

 var deltaY = e.deltaY*-30 || // событие wheel

 e.wheelDeltaY/4 || // событие mousewheel в Webkit

 (e.wheelDeltaY===undefined && // Если нет 2-мерного свойства,

<b>                  e.wheelDelta/4) || // использовать 1-мерное свойство</b>

 e.detail*-10 || // событие DOMMouseScroll в Firefox