Konflik saat bersamaan menggunakan acara keyboard untuk menggulir dan menjentikkan gulir CSS

Anda dapat menggulir halaman demo saya secara horizontal dengan menekan Space Bar, Page Up / Page Downdan Left Arrow / Right Arrowtombol. Anda juga dapat menjentik gulir dengan mouse atau trackpad.

Tetapi hanya satu atau yang lainnya yang berfungsi.

Apakah ada cara agar acara keyboard dan gertakan CSS dapat hidup berdampingan? Apa yang saya lewatkan? Bantuan apa pun akan sangat dihargai, karena saya telah berjuang dengan masalah ini selama lebih dari seminggu.

Lihat demo saya di CodePen

(Harap batalkan komentar pada bagian kode CSS yang relevan untuk mengaktifkan efek gertakan gulir untuk melihat bahwa pintasan keyboard berhenti berfungsi.)

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

Catatan: Saya menggunakan modul kecil dan elegan yang disebut Animate Plus untuk mencapai animasi scrolling yang lancar.

Pembaruan: Solusi @ Kostja bekerja di Chrome, tetapi tidak di Safari untuk Mac atau iOS, dan penting bagi saya bahwa ia bekerja di Safari.

Saya kira tidak ada, css menimpa javascript. Tetapi Anda dapat menambahkan wheel listlistener seperti:

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

Ini seharusnya bekerja.

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