Для другого вопроса я написал этот ответ , включая этот пример кода .
В этом коде я использую колесо мыши, чтобы увеличивать или уменьшать масштаб HTML5 Canvas. Я нашел код, который нормализует разницу в скорости между Chrome и Firefox. Однако обработка масштабирования в Safari намного, намного быстрее, чем в любом из них.
Вот код, который у меня сейчас есть:
var handleScroll = function(e){
var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
if (delta) ...
return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false); // Everyone else
Какой код можно использовать, чтобы получить одинаковое значение «дельта» для одинакового количества прокрутки колеса мыши в Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 и IE9?
Этот вопрос связан, но не имеет хорошего ответа.
Изменить : Дальнейшее расследование показывает, что одно событие прокрутки "вверх" является:
| evt.wheelDelta | evt.detail ------------------ + ---------------- + ------------ Safari v5 / Win7 | 120 | 0 Safari v5 / OS X | 120 | 0 Safari v7 / OS X | 12 | 0 Chrome v11 / Win7 | 120 | 0 Chrome v37 / Win7 | 120 | 0 Chrome v11 / OS X | 3 (!) | 0 (возможно неправильно) Chrome v37 / OS X | 120 | 0 IE9 / Win7 | 120 | не определено Opera v11 / OS X | 40 | -1 Opera v24 / OS X | 120 | 0 Opera v11 / Win7 | 120 | -3 Firefox v4 / Win7 | неопределенный | -3 Firefox v4 / OS X | неопределенный | -1 Firefox v30 / OS X | неопределенный | -1
Кроме того, использование трекпада MacBook в OS X дает разные результаты даже при медленном движении:
- В Safari и Chrome
wheelDelta
это значение 3 вместо 120 для колеса мыши. - На Firefox
detail
это обычно2
, иногда1
, но при очень медленной прокрутке НИКАКОГО СОБЫТИЯ HANDLER не запускается вообще .
Итак, вопрос в следующем:
Каков наилучший способ дифференцировать это поведение (в идеале без какого-либо агента пользователя или прослушивания ОС)?
источник
e.wheelDelta/120
?Ответы:
Изменить сентябрь 2014
При условии:
… Я могу только рекомендовать использовать этот простой код для подсчета знаков:
Первоначальная попытка быть правильной следует.
Вот моя первая попытка сценария нормализации значений. Он имеет два недостатка в OS X: Firefox в OS X будет выдавать значения 1/3 того, какими они должны быть, а Chrome в OS X будет давать значения 1/40 того, какими они должны быть.
Вы можете проверить этот код в своем браузере здесь: http://phrogz.net/JS/wheeldelta.html
Предложения по обнаружению и улучшению поведения в Firefox и Chrome в OS X приветствуются.
Редактировать : Одно из предложений @Tom - просто считать каждый вызов события одним движением, используя знак расстояния для его настройки. Это не даст хороших результатов при плавной / ускоренной прокрутке на OS X, а также не справится со случаями, когда колесо мыши перемещается очень быстро (например
wheelDelta
, 240), но это случается нечасто. Этот код теперь является рекомендуемой техникой, показанной в верхней части этого ответа, по причинам, описанным там.источник
(((evt.deltaY <0 || evt.wheelDelta>0) || evt.deltaY < 0) ? 1 : -1)
, хотя и не уверен, что QA обнаружит с этим, хотя.Вот моя безумная попытка создать кросс-браузерную согласованную и нормализованную дельту (-1 <= delta <= 1):
Это абсолютно эмпирически, но работает довольно хорошо на Safari 6, FF 16, Opera 12 (OS X) и IE 7 на XP
источник
event
-объект вo
?o
Переменная есть , чтобы показать , что мы хотим оригинальное событие , а не перенесенного событие , как JQuery или других библиотек может перейти к обработчиков событий.Наши друзья в Facebook создали отличное решение этой проблемы.
Я проверил таблицу данных, которую я строю с использованием React, и она прокручивается как масло!
Это решение работает в различных браузерах, в Windows / Mac, и в обоих из них используется трекпад / мышь.
Исходный код можно найти здесь: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
источник
Я создал таблицу с разными значениями, возвращаемыми разными событиями / браузерами, с учетом
wheel
события DOM3, которое некоторые браузеры уже поддерживают (таблица ниже).Исходя из этого я сделал эту функцию для нормализации скорости:
http://jsfiddle.net/mfe8J/1/
Таблица для
mousewheel
,wheel
иDOMMouseScroll
событий:источник
Еще одно более или менее автономное решение ...
Это не принимает во внимание время между событиями, хотя. Некоторые браузеры, кажется, всегда запускают события с одной и той же дельтой и просто запускают их быстрее при быстрой прокрутке. Другие меняют дельты. Можно представить адаптивный нормализатор, который принимает во внимание время, но это будет несколько сложным и неудобным в использовании.
Работать можно здесь: jsbin / iqafek / 2
источник
Простое и рабочее решение:
источник
Для поддержки масштабирования на сенсорных устройствах зарегистрируйтесь для событий жестового старта, смены жеста и жеста и используйте свойство event.scale. Вы можете увидеть пример кода для этого.
Для Firefox 17
onwheel
мероприятие планируется поддерживать в настольной и мобильной версиях (согласно документам MDN на onwheel ). Также для Firefox, может быть,MozMousePixelScroll
полезно специфичное для Gecko событие (хотя, по-видимому, теперь оно не рекомендуется, поскольку в Firefox событие DOMMouseWheel теперь не рекомендуется).Для Windows сам драйвер, по-видимому, генерирует события WM_MOUSEWHEEL, WM_MOUSEHWHEEL (и, возможно, событие WM_GESTURE для панорамирования сенсорной панели?). Это объясняет, почему Windows или браузер, по-видимому, не нормализуют значения событий mousewheel (и это может означать, что вы не можете написать надежный код для нормализации значений).
Для
onwheel
( поддержки событий не onmousewheel) в Internet Explorer для IE9 и IE10 вы также можете использовать стандартноеonwheel
событие W3C . Однако одна метка может быть значением, отличным от 120 (например, одна метка становится 111 (вместо -120) на моей мыши, использующей эту тестовую страницу ). Я написал еще одну статью с другими деталями событий колеса, которые могут иметь отношение к делу.Основываясь на своем собственном тестировании событий колес (я пытаюсь нормализовать значения для прокрутки), я обнаружил, что я получаю различные значения для ОС, поставщика браузера, версии браузера, типа события и устройства (мышь Microsoft Tiltwheel, жесты сенсорной панели ноутбука , сенсорная панель ноутбука с зоной прокрутки, волшебная мышь Apple, скроллбольная мышь Apple, сенсорная панель Mac и т. д. и т. д.).
И нужно игнорировать различные побочные эффекты от конфигурации браузера (например, Firefox mousewheel.enable_pixel_scrolling, chrome --scroll-пиксели = 150), настроек драйвера (например, тачпад Synaptics) и конфигурации ОС (настройки мыши Windows, настройки мыши OSX, Настройки кнопки X.org).
источник
Это проблема, с которой я боролся сегодня несколько часов, и не впервые :(
Я пытался суммировать значения с помощью «пролистывания» и посмотреть, как разные браузеры сообщают о значениях, и они сильно различаются: Safari сообщает о больших количествах на порядок на почти всех платформах, а Chrome - гораздо больше (например, в 3 раза больше). ) чем Firefox, Firefox сбалансирован в долгосрочной перспективе, но сильно отличается среди платформ с небольшими движениями (в гноме Ubuntu, почти только +3 или -3, кажется, что он суммирует меньшие события и затем отправляет большое «+3»)
На данный момент найдено три решения:
Идея в Qooxdoo хороша и работает, и это единственное решение, которое я нашел в настоящее время полностью совместимым с кроссбраузерным интерфейсом.
К сожалению, это имеет тенденцию перенормировать также ускорение. Если вы попробуете это (в их демонстрациях) и прокрутите некоторое время вверх и вниз на максимальной скорости, вы заметите, что чрезвычайно быстрая или очень медленная прокрутка в основном производит почти одинаковое количество движения. С другой стороны, если вы перезагрузите страницу и проведете ее очень медленно, вы заметите, что она будет прокручиваться довольно быстро ».
Это разочаровывает пользователя Mac (такого, как я), который использовал энергичные прокрутки на сенсорной панели и надеется добраться до верха или низа прокрутки.
Более того, поскольку скорость мыши уменьшается на основе полученного максимального значения, чем больше ваш пользователь пытается ускорить его, тем больше он будет замедляться, а у пользователя с «медленной прокруткой» будут довольно высокие скорости.
Это делает это (иначе блестящее) решение немного лучшей реализацией решения 1.
Я перенес решение в плагин jquery mousewheel: http://jsfiddle.net/SimoneGianni/pXzVv/
Если вы поиграете с ним некоторое время, вы увидите, что вы начнете получать довольно однородные результаты, но вы также заметите, что он имеет тенденцию к + 1 / -1 значениям довольно быстро.
Сейчас я работаю над его улучшением, чтобы лучше обнаруживать пики, чтобы они не отправляли все "в масштабе". Также было бы неплохо также получить значение с плавающей запятой между 0 и 1 в качестве значения дельты, чтобы обеспечить согласованный вывод.
источник
Определенно не существует простого способа нормализации для всех пользователей во всех ОС во всех браузерах.
Это становится хуже, чем перечисленные вами варианты - при моей настройке WindowsXP + Firefox3.6 мое колесо мыши делает 6 на одну ступень прокрутки - возможно, потому что где-то я забыл, что ускорил колесо мыши, либо в ОС, либо где-то примерно так: конфиг
Тем не менее, я работаю над аналогичной проблемой (с аналогичным приложением между прочим, но не на холсте), и это происходит со мной, просто используя знак дельты +1 / -1 и измеряя во времени в прошлый раз, когда вы запускаете, вы будете иметь скорость ускорения, т.е. если кто-то прокручивает один раз против нескольких раз за несколько минут (я бы поспорил, как это делает Google Maps).
Концепция, похоже, хорошо работает в моих тестах, просто добавьте к ускорению все, что меньше 100 мс.
источник
источник