jQuery mousewheel - плагин, который добавляет кросс-браузерную поддержку колеса мыши с нормализацей дельты. Для того, чтобы использовать его, нужно просто привязать событие mousewheel к элементу.
jQuery mousewheel имеет два вспомогательных метода - mousewheel и unmousewheel, которые работают точно так же, как и другие вспомогательные методы событий в jQuery.
Объект события обновляется с помощью нормализированных свойств deltaX и deltaY. К тому же, у объекта события появляется новое свойство под названием deltaFactor. Умножив deltaFactor на deltaX or deltaY, мы получим длину скроллинга, сообщенную браузером.
Вот примеры использования синтаксиса метода привязки и вспомогательного метода:
// с помощью метода on
$('#my_elem').on('mousewheel', function(e) {
console.log(e.deltaX, e.deltaY, e.deltaFactor);
});
// с помощью вспомогательного метода
$('#my_elem').mousewheel(function(e) {
console.log(e.deltaX, e.deltaY, e.deltaFactor);
});
Старый способ с добавлением трех аргументов (delta, deltaX и deltaY) для обработчиков событий в настоящее время осуждается и будет удален в последующих выпусках.
Дельты...
Сочетание браузеров, операционных систем и гаджетов дает огромный спектр возможных значений дельт. В самом деле, если пользователь использует трекпад, а затем колесо мыши, значения дельт могут сильно варьироваться. Этот плагин нормализует эти значения так, чтобы вы получили целое число от +-1 и до бесконечности с приростом в размере +-1, согласно использованной силе ускорения. Это число может потенциально достичь нескольких тысяч в зависимости от того, какой гаджет вы используете.
Получение величины прокрутки с помощью jQuery mousewheel
В некоторых случаях для нас предпочтительнее нормализированная дельта, но в других мы хотим знать, какова будет длина скроллинга на основе действий пользователя.
Вычислить это значение можно путем умножения свойства события deltaFactor на свойство deltaX или deltaY.
Свойство deltaFactor было добавлено в объект события в 3.1.5, чтобы мы могли вычленить свойство дельты. Это нестандартное свойство.
Использование с Browserify
Встроенная поддержка browserify.
npm install jquery-mousewheel
npm install jquery-browserify
В вашем серверном node.js:
var express = require('express');
var app = express.createServer();
app.use(require('browserify')({
require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));
В Вашем браузере с помощью JavaScript:
var $ = require('jquery-browserify');
require('jquery-mousewheel')($);