Kaydırma ve CSS kaydırma yapıştırma için klavye olaylarını aynı anda kullanırken çakışma

Yatay basarak benim demo sayfası kaydırma yapabilirsiniz Space Bar, Page Up / Page Downve Left Arrow / Right Arrowanahtarlar. Fare veya izleme dörtgeni ile kaydırma da yapabilirsiniz.

Ama sadece biri ya da diğeri çalışıyor.

Klavye olaylarının ve CSS kaydırma yapışmasının bir arada var olabilmesinin bir yolu var mı? Neyi kaçırıyorum? Bir haftadan fazla bir süredir bu sorunla mücadele ettiğim için herhangi bir yardım gerçekten takdir edilecektir.

CodePen'deki demomu inceleyin

(Klavye kısayollarının çalışmayı durdurduğunu görmek için kaydırma yapıştırma efektini etkinleştirmek için lütfen ilgili CSS kod parçasını kaldırın.)

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

Not: Yumuşak kaydırma animasyonunu elde etmek için Animate Plus adlı küçük ve zarif bir modül kullanıyorum .

Güncelleme: @ Kostja'nın çözümü Chrome'da çalışıyor, ancak Mac veya iOS için Safari'de çalışmıyor ve Safari'de çalışması benim için çok önemli.

Sanırım yok, css javascript üzerine yazar. Ancak, aşağıdaki gibi tekerlek olay listeleyicilerini ekleyebilirsiniz:

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

Bu çalışmalı.

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