Конфликт при одновременном использовании событий клавиатуры для прокрутки и привязки прокрутки CSS

11

Вы можете горизонтально прокручивать мою демонстрационную страницу, нажав клавишу Space Bar, Page Up / Page Downи Left Arrow / Right Arrowключи. Вы также можете привязать прокрутку с помощью мыши или трекпада.

Но работает только один или другой.

Есть ли способ сосуществования событий клавиатуры и привязки прокрутки CSS? Что мне не хватает? Любая помощь будет очень признательна, так как я боролся с этой проблемой более недели.


Проверьте мою демонстрацию на CodePen

(Пожалуйста, раскомментируйте соответствующий фрагмент кода CSS, чтобы включить эффект привязки прокрутки, чтобы сочетания клавиш перестали работать.)



Примечание: я использую небольшой и элегантный модуль под названием Animate Plus для достижения плавной прокрутки анимации.


Обновление: решение @ Kostja работает в Chrome, но не в Safari для Mac или iOS, и для меня важно, чтобы оно работало в Safari.

деспот
источник

Ответы:

3

Я думаю, что нет, CSS перезаписывает JavaScript. Но вы можете просто добавить колесный EventListener как:

window.addEventListener("wheel", function() {
    if(event.deltaY > 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(1)
      })      
    }
      if(event.deltaY < 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(-1)
      })      
    }      
});

https://codepen.io/kostjaaa/pen/NWWVBKd

Kostja
источник
Не могли бы вы опубликовать ссылку на форк на CodePen, потому что я не могу заставить ваше решение работать? Спасибо.
Царь
Извините, но это не работает. Ты пробовал это?
Царь
да пробовал это с Chrome версии 78.0.3904.108 (64Bit)
kostja
Что не работает на вашей стороне? оснастка или свиток вообще? Вы должны нажать в представлении, прежде чем использовать клавиатуру, кстати. Клавиатура не сочетается с парением, как и прокрутка.
Kostja
Я только что проверил его в Chrome, и он работает! Но это не работает в Safari для Mac или iOS, что для меня гораздо важнее для этого проекта. Вы знаете, в чем может быть причина?
Царь
0
window.onload = () => {
  window.addEventListener("wheel", () => {
    const direction = event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : false;

    if (direction) {
      animate({
        easing: "out-quintic",
        change: animateScroll(direction)
      });
    }
  });

  document.body.onkeydown = event => {
    switch (event.key) {
      case " ": // Space Bar
      case "PageDown":
      case "ArrowRight": {
        animate({
          easing: "out-quintic",
          change: animateScroll(1)
        });
        break;
      }
      case "PageUp":
      case "ArrowLeft": {
        animate({
          easing: "out-quintic",
          change: animateScroll(-1)
        });
        break;
      }
    }
  };
};    

Это должно работать.

https://codepen.io/JZ6/pen/XWWQqRK

Jay-Z
источник