Конфлікт при одночасному використанні подій на клавіатурі для прокрутки та оснащення 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