同时使用键盘事件进行滚动和CSS滚动捕捉时发生冲突

您可以通过按下水平滚动我的演示页Space Bar，Page Up / Page Down和Left Arrow / Right Arrow键。您也可以使用鼠标或触控板捕捉滚动。

但是只有其中一项有效。

键盘事件和CSS滚动捕捉是否可以共存？我想念什么？任何帮助将不胜感激，因为我一直在努力解决这个问题超过一个星期。

在CodePen上查看我的演示

（请取消注释相关的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中运行。

— 沙皇
source

Answers:

我猜没有，css覆盖了javascript。但是您可以简单地添加wheel eventlistener，例如：

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

— 科斯蒂亚
source

您能否在CodePen上发布指向fork的链接，因为我无法使您的解决方案正常工作？谢谢。

— 沙皇

抱歉，它不起作用。你试过了吗？

— 沙皇

是的，已经尝试过Chrome版本78.0.3904.108（64位）

— kostja，

什么对您不利？捕捉还是滚动？您必须先在视图中单击，然后再使用键盘btw。键盘没有与悬停结合，滚动也没有。

— kostja，

我刚刚在Chrome中对其进行了测试，并且确实可以正常工作！但是它不适用于Mac或iOS的Safari，这对我来说对于此项目而言更为重要。你知道可能是什么原因吗？

— 沙皇

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

— 周杰伦
source