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

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

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

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

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

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

import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"

const sections = Array.from(document.querySelectorAll("section")).sort(
  (s1, s2) => {
    return s1.getBoundingClientRect().left - s2.getBoundingClientRect().left
  }
)

const getSectionInView = () => {
  const halfWidth = window.innerWidth / 2
  const index = sections.findIndex(
    section =>
      section.getBoundingClientRect().left <= halfWidth &&
      section.getBoundingClientRect().right > halfWidth
  )
  return index
}

const getNextSection = dir => {
  const sectionInViewIndex = getSectionInView()
  const nextIndex = sectionInViewIndex + dir
  const numSections = sections.length
  const nextSectionIndex =
    nextIndex < 0 || nextIndex >= numSections ? sectionInViewIndex : nextIndex
  return sections[nextSectionIndex]
}

const container = document.scrollingElement

const animateScroll = dir => {
  const from = container.scrollLeft
  const { left } = getNextSection(dir).getBoundingClientRect()
  return progress => (container.scrollLeft = from + progress * left)
}

window.onload = () => {
  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
      }
    }
  }
}

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

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

Я думаю, что нет, 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

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