Konflikt podczas jednoczesnego używania zdarzeń klawiatury do przewijania i przyciągania przewijania CSS

Można przewijać w poziomie moją stronę demonstracyjną, naciskając Space Bar, Page Up / Page Downi Left Arrow / Right Arrowkluczy. Możesz także szybko przewijać za pomocą myszy lub gładzika.

Ale tylko jedno lub drugie działa.

Czy istnieje sposób, aby zdarzenia na klawiaturze i przyciąganie przewijania CSS mogły współistnieć? czego mi brakuje? Każda pomoc byłaby bardzo wdzięczna, ponieważ zmagam się z tym problemem od ponad tygodnia.

Sprawdź moje demo na CodePen

(Proszę odkomentować odpowiedni fragment kodu CSS, aby włączyć efekt przyciągania przewijania, aby zobaczyć, że skróty klawiaturowe przestają działać.)

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

Uwaga: Używam małego i eleganckiego modułu o nazwie Animate Plus do uzyskania płynnej animacji przewijania.

Aktualizacja: Rozwiązanie @ Kostja działa w Chrome, ale nie w Safari na Macu lub iOS, i dla mnie kluczowe jest, aby działało w Safari.

Myślę, że nie ma, css zastępuje javascript. Ale możesz po prostu dodać detektor zdarzeń koła, taki jak:

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

To powinno działać.

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