Conflitto quando si utilizzano contemporaneamente eventi da tastiera per lo scorrimento e lo snap a scorrimento CSS

È possibile scorrere orizzontalmente la mia pagina demo premendo Space Bar, Page Up / Page Downe Left Arrow / Right Arrowchiavi. Puoi anche scattare con il mouse o il trackpad.

Ma funziona solo l'uno o l'altro.

Esiste un modo in cui gli eventi della tastiera e lo snap a scorrimento CSS possono coesistere? Cosa mi sto perdendo? Qualsiasi aiuto sarebbe molto apprezzato, dal momento che ho lottato con questo problema per oltre una settimana.

Guarda la mia demo su CodePen

(Rimuovere il frammento del codice CSS pertinente per abilitare l'effetto di scorrimento per vedere che le scorciatoie da tastiera smettono di funzionare.)

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
      }
    }
  }
}

Nota: sto usando un piccolo ed elegante modulo chiamato Animate Plus per ottenere l'animazione a scorrimento uniforme.

Aggiornamento: la soluzione di @ Kostja funziona in Chrome, ma non in Safari per Mac o iOS, ed è fondamentale per me che funzioni in Safari.

Immagino di no, il CSS sovrascrive il javascript. Ma puoi semplicemente aggiungere un listener di eventi come:

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;
      }
    }
  };
};    

Questo dovrebbe funzionare.

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