Переопределить прокрутку сенсорной панели на Edge - PullRequest
Новая
       8

Переопределить прокрутку сенсорной панели на Edge

0 голосов
/ 16 октября 2019

Похоже, что когда вы используете overflow: hidden в Edge, событие mousewheel больше не запускается, когда вы используете сенсорную панель для прокрутки (средняя кнопка мыши по-прежнему работает). Эта проблема появляется только при использовании Edge и Internet Explorer.

Следующий скрипт регистрирует расстояния прокрутки, которые должны происходить с каждым событием mousewheel. (Работает при использовании Chrome и Firefox). 

document.querySelector("#out").addEventListener("mousewheel", function(event) {
  if (event.defaultPrevented) return;
  if (event.shiftKey) {
    if (event.deltaX || event.deltaY) {
      move(0, event.deltaX || event.deltaY);
      event.preventDefault();
    }
    return;
  }
  console.log(event.deltaY, event.deltaX);
  event.preventDefault();
}, {
  passive: false
});
#out {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
<div id="out">
  <div id="in">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis tortor ultricies nibh mollis scelerisque. Proin eget mauris sollicitudin, eleifend lorem nec, aliquam justo. Pellentesque commodo ante nec finibus porta. Nam lobortis tempus ultrices. Ut ultrices, enim eget sodales eleifend, enim ipsum tincidunt nisl, ut tempor justo ante non nisi. Etiam ut ex non justo pellentesque posuere. Nulla sollicitudin massa viverra sapien congue, quis faucibus nisl aliquam. Duis ac fringilla eros. Vestibulum pretium, sem pulvinar consectetur ornare, urna justo vestibulum ligula, ullamcorper dignissim lectus velit quis turpis. Proin eu risus justo. Sed at nibh ac tortor rutrum mollis sagittis bibendum leo. Nunc feugiat mauris nec volutpat vestibulum. Phasellus ultricies, lacus sit amet posuere dapibus, nibh ligula pellentesque ligula, vitae congue massa ipsum sit amet velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel aliquet enim. Donec in lorem consequat, ullamcorper lectus sed, consectetur augue.
  </div>
</div>

1 Ответ

1 голос
/ 17 октября 2019

Это известная проблема, которую вы можете найти здесь . Из ответа Microsoft Edge Team в системе отслеживания проблем мы могли видеть, что проблема теперь решена путем реализации событий указателя PTP , как описано в этом сообщении в блоге .

Вы можете использовать события указателя, как показано ниже:

В HTML добавьте CSS-свойство touch-action к целевому элементу, чтобы браузер не выполнял поведение по умолчанию при касании в ответ на жесты:

<canvas height=400 width=400 id="canvas" style="touch-action: none;"></canvas>

В JavaScript присоедините прослушиватель события Pointer к целевому элементу. Вы можете определить тип указателя, который вызвал обработчик, используя свойство pointerType объекта события, переданного в обратный вызов слушателя события: 

document.getElementById('canvas').addEventListener('pointermove', function(event) {
    console.log('pointermove!');
});

Для получения дополнительной информации о событиях указателя вы можетесм. этот документ .

...