[javascript] 스크롤 및 CSS 스크롤 스냅에 키보드 이벤트를 동시에 사용할 때 충돌

당신은 수평으로 눌러 내 데모 페이지를 스크롤 할 수 있습니다 Space Bar, Page Up / Page Down그리고 Left Arrow / Right Arrow키. 마우스 나 트랙 패드로 스크롤을 스냅 할 수도 있습니다.

그러나 하나 또는 다른 것만 작동합니다.

키보드 이벤트와 CSS 스크롤 스냅이 공존 할 수있는 방법이 있습니까? 내가 무엇을 놓치고 있습니까? 일주일 이상이 문제로 어려움을 겪고 있으므로 도움을 주시면 감사하겠습니다.

CodePen 데모를 확인하십시오

키보드 단축키가 작동을 멈추는 것을 보려면 스크롤 CSS 효과를 사용하려면 관련 CSS 코드를 주석 해제하십시오.

코드 스 니펫 표시

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

스 니펫 확장

참고 : 부드러운 스크롤 애니메이션을 달성하기 위해 Animate Plus 라는 작고 우아한 모듈을 사용하고 있습니다.

업데이트 : @ Kostja의 솔루션은 Chrome에서는 작동하지만 Mac 또는 iOS 용 Safari에서는 작동하지 않으며 Safari에서 작동하는 것이 중요합니다.

답변

나는 CSS가 자바 스크립트를 덮어 쓰지 않는다고 생각합니다. 그러나 다음과 같이 휠 이벤트 리스너를 추가 할 수 있습니다.

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

이 작동합니다.

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