Xung đột khi sử dụng đồng thời các sự kiện bàn phím để cuộn và chụp nhanh cuộn CSS

Bạn có thể theo chiều ngang cuộn trang demo của tôi bằng cách nhấn Space Bar, Page Up / Page Downvà Left Arrow / Right Arrowcác phím. Bạn cũng có thể chụp cuộn bằng chuột hoặc trackpad.

Nhưng chỉ có một hoặc các công trình khác.

Có cách nào để các sự kiện bàn phím và chụp nhanh cuộn CSS có thể cùng tồn tại không? Tôi đang thiếu gì? Bất kỳ trợ giúp sẽ thực sự được đánh giá cao, vì tôi đã phải vật lộn với vấn đề này trong hơn một tuần.

Hãy xem bản demo của tôi trên CodePen

(Vui lòng bỏ ghi chú đoạn mã CSS có liên quan để bật hiệu ứng chụp nhanh cuộn để thấy các phím tắt ngừng hoạt động.)

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

Lưu ý: Tôi đang sử dụng một mô-đun nhỏ và thanh lịch có tên là Animate Plus để đạt được hiệu ứng cuộn mượt mà.

Cập nhật: Giải pháp của @ Kostja hoạt động trong Chrome, nhưng không phải trong Safari cho Mac hoặc iOS và điều quan trọng với tôi là nó hoạt động trong Safari.

Tôi đoán là không có, css ghi đè lên javascript. Nhưng bạn chỉ có thể thêm bánh xe sự kiện như:

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

Điều này nên làm việc.

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