колесо мыши, колесо и DOMMouseScroll в JavaScript

DOMMouseScroll работает только для Firefox.

wheel Кажется, работает как для Firefox, так и для chrome. Что это? Не нашел документов по этому делу.

mousewheel не работает для Firefox.

как я должен использовать их, чтобы получить лучшую совместимость с браузером.

пример:

document.addEventListener('ScrollEvent', function(e){
   DoSomething();
});
10
events javascript scroll

2 ответов

я бы предложил, чтобы все три из них использовались одновременно для охвата всех браузеров.

Примечания:

  1. в версиях Firefox, где оба wheel и DOMMouseScroll события поддерживаются, нам нужен способ, чтобы заставить браузер выполнить только wheel, а не обе. Что-то вроде следующего:if ("onwheel" in window) ...

  2. в выше проверьте, хотя, в случае IE9 и IE10 не получится, потому что, хотя эти браузеры поддерживают тег wheel событие, у них нет onwheel атрибут в элементах DOM. Чтобы противостоять этому, мы можем использовать флаг, как показано ниже.

  3. я считаю, что количество возвращенных e.deltaY, e.wheelDelta и e.detail не является полезным, кроме помогает нам определить направление прокрутки, поэтому в решении ниже -1 и 1 будут возвращены.

фрагмент:

/* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;

/* The function that will run when the events are triggered. */
function DoSomething (e) {
  /* Check whether the wheel event is supported. */
  if (e.type == "wheel") supportsWheel = true;
  else if (supportsWheel) return;

  /* Determine the direction of the scroll (< 0 → up, > 0 → down). */
  var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;

  /* ... */
  console.log(delta);
}

/* Add the event listeners for each event. */
document.addEventListener('wheel', DoSomething);
document.addEventListener('mousewheel', DoSomething);
document.addEventListener('DOMMouseScroll', DoSomething);

хотя прошло почти 3 года с момента публикации вопроса, я считаю, что люди, которые наткнутся на него в будущем, выиграют от этого ответа, поэтому не стесняйтесь предлагать / улучшать он.

12

вы можете функция обнаружения поддержки колеса, как это:

var wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : //     Modern browsers support "wheel"
          document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
          "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox

затем вы можете прикрепить обработчик события следующим образом:

$("#wrapper").on(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
    $("#Left").click();
} else if (e.deltaY <= 0) {
    $("#Right").click();
}
});

или при использовании vanilla js:

document.getElementById("wrapper").addEventListener(wheelEvt, function(e) {
console.log(e.deltaY);
if (e.deltaY > 0) {
    $("#Left").click();
} else if (e.deltaY <= 0) {
    $("#Right").click();
}
}, false);

ссылка: https://developer.mozilla.org/en-US/docs/Web/Events/wheel

0