Konflikt bei gleichzeitiger Verwendung von Tastaturereignissen zum Scrollen und CSS-Scroll-Snapping

Sie können horizontal meine Demo - Seite durch Drücken blättern Space Bar, Page Up / Page Downund Left Arrow / Right ArrowTasten. Sie können den Bildlauf auch mit einer Maus oder einem Trackpad ausführen.

Aber nur das eine oder andere funktioniert.

Gibt es eine Möglichkeit, wie Tastaturereignisse und CSS-Scroll-Snapping nebeneinander existieren können? Was vermisse ich? Jede Hilfe wäre sehr dankbar, da ich seit über einer Woche mit diesem Problem zu kämpfen habe.

Schauen Sie sich meine Demo auf CodePen an

(Bitte kommentieren Sie den entsprechenden CSS-Code aus, um den Scroll-Snapping-Effekt zu aktivieren und festzustellen, dass Tastaturkürzel nicht mehr funktionieren.)

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

Hinweis: Ich verwende ein kleines und elegantes Modul namens Animate Plus, um eine reibungslose Bildlaufanimation zu erzielen.

Update: Die Lösung von @ Kostja funktioniert in Chrome, aber nicht in Safari für Mac oder iOS. Für mich ist es entscheidend, dass sie in Safari funktioniert.

Ich denke, das gibt es nicht, das CSS überschreibt das Javascript. Sie können aber einfach Wheel Eventlistener hinzufügen wie:

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

Das sollte funktionieren.

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