Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Колёсико мыши используется редко. Оно есть даже не у всех мышей. Поэтому существуют пользователи, которые в принципе не могут сгенерировать такое событие.
…Но, тем не менее, его использование может быть оправдано. Например, можно добавить дополнительные удобства для тех, у кого колёсико есть.
Содержание
- Отличия колёсика от прокрутки
- Зоопарк wheel в разных браузерах
- Дельты.
- Получение величины прокрутки с помощью jQuery mousewheel
Отличия колёсика от прокрутки
Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.
- При прокрутке срабатывает событие onscroll – рассмотрим его в дальнейшем. Оно произойдёт при любой прокрутке, в том числе через клавиатуру, но только на прокручиваемых элементах. Например, элемент с overflow:hidden в принципе не может сгенерировать onscroll .
- А событие wheel является чисто «мышиным». Оно генерируется над любым элементом при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, overflow:hidden никак не препятствует обработке колеса мыши.
Кроме того, событие onscroll происходит после прокрутки, а onwheel – до прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).
Зоопарк wheel в разных браузерах
Событие wheel появилось в стандарте не так давно. Оно поддерживается Chrome 31+, IE9+, Firefox 17+.
До него браузеры обрабатывали прокрутку при помощи событий mousewheel (все кроме Firefox) и DOMMouseScroll, MozMousePixelScroll (только Firefox).
Самые важные свойства современного события и его нестандартных аналогов:
wheel Свойство deltaY – количество прокрученных пикселей по вертикали. Существуют также свойства deltaX и deltaZ для других направлений прокрутки. MozMousePixelScroll Срабатывает, начиная с Firefox 3.5, только в Firefox. Даёт возможность отменить прокрутку и получить размер в пикселях через свойство detail , ось прокрутки в свойстве axis . mousewheel Срабатывает в браузерах, которые ещё не реализовали wheel . В свойстве wheelDelta – условный «размер прокрутки», обычно равен 120 для прокрутки вверх и -120 – вниз. Он не соответствует какому-либо конкретному количеству пикселей.
Чтобы кросс-браузерно отловить прокрутку и, при необходимости, отменить её, можно использовать все эти события.
jQuery mousewheel — плагин, который добавляет кросс-браузерную поддержку колеса мыши с нормализацей дельты. Для того, чтобы использовать его, нужно просто привязать событие mousewheel к элементу.
jQuery mousewheel имеет два вспомогательных метода — mousewheel и unmousewheel , которые работают точно так же, как и другие вспомогательные методы событий в jQuery.
Объект события обновляется с помощью нормализированных свойств deltaX и deltaY . К тому же, у объекта события появляется новое свойство под названием deltaFactor . Умножив deltaFactor на deltaX or deltaY , мы получим длину скроллинга, сообщенную браузером.
Вот примеры использования синтаксиса метода привязки и вспомогательного метода:
Старый способ с добавлением трех аргументов ( delta , deltaX и deltaY ) для обработчиков событий в настоящее время осуждается и будет удален в последующих выпусках.
Дельты.
Сочетание браузеров, операционных систем и гаджетов дает огромный спектр возможных значений дельт. В самом деле, если пользователь использует трекпад, а затем колесо мыши, значения дельт могут сильно варьироваться. Этот плагин нормализует эти значения так, чтобы вы получили целое число от +-1 и до бесконечности с приростом в размере +-1, согласно использованной силе ускорения. Это число может потенциально достичь нескольких тысяч в зависимости от того, какой гаджет вы используете.
Получение величины прокрутки с помощью jQuery mousewheel
В некоторых случаях для нас предпочтительнее нормализированная дельта, но в других мы хотим знать, какова будет длина скроллинга на основе действий пользователя. Вычислить это значение можно путем умножения свойства события deltaFactor на свойство deltaX или deltaY .
Свойство deltaFactor было добавлено в объект события в 3.1.5, чтобы мы могли вычленить свойство дельты. Это нестандартное свойство.
jQuery Mouse Wheel Plugin
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
In order to use the plugin, simply bind the mousewheel event to an element.
It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery.
The event object is updated with the normalized deltaX and deltaY properties. In addition there is a new property on the event object called deltaFactor . Multiply the deltaFactor by deltaX or deltaY to get the scroll distance that the browser has reported.
Here is an example of using both the bind and helper method syntax:
The old behavior of adding three arguments ( delta , deltaX , and deltaY ) to the event handler is now deprecated and will be removed in later releases.
The combination of browsers, operating systems, and devices offer a huge range of possible delta values. In fact if the user uses a trackpad and then a physical mouse wheel the delta values can differ wildly. This plugin normalizes those values so you get a whole number starting at +-1 and going up in increments of +-1 according to the force or acceleration that is used. This number has the potential to be in the thousands depending on the device. Check out some of the data collected from users here.
Getting the scroll distance
In some use-cases we prefer to have the normalized delta but in others we want to know how far the browser should scroll based on the users input. This can be done by multiplying the deltaFactor by the deltaX or deltaY event property to find the scroll distance the browser reported.
The deltaFactor property was added to the event object in 3.1.5 so that the actual reported delta value can be extracted. This is a non-standard property.
Источник: