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


11

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

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

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


CodePen 데모를 확인하십시오

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



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


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

답변:


3

나는 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


솔루션이 작동하지 않기 때문에 CodePen에 포크 링크를 게시 할 수 있습니까? 감사.
Tzar

죄송하지만 작동하지 않습니다. 사용해 보셨습니까?
Tzar

예 크롬 버전 78.0.3904.108 (64 비트)와 그것을 시도
kostja

당신 편에서 작동하지 않는 것은 무엇입니까? 스냅 또는 스크롤? 키보드 btw를 사용하기 전에보기를 클릭해야합니다. 키보드는 스크롤처럼 마우스 오버와 결합되지 않습니다.
kostja

방금 Chrome에서 테스트했는데 작동합니다! 그러나 Mac 또는 iOS 용 Safari에서는 작동하지 않으므로이 프로젝트에서 더 중요합니다. 이유가 무엇인지 아십니까?
Tzar

0
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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.