Описание jQuery MouseWheel

Опубликовано: 26 апреля 2015 г.
  • скроллинг
  • jquery

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')($);
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
SPAbootstrapjavascriptjqueryанимацияверсткагалереяграфикакарусельподсказкискроллингсчетчикформыэлементы интерфейса
© 2009-2017 WebSketches.ru