标签: animateplus

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

您可以通过按下水平滚动我的演示页Space BarPage Up / Page DownLeft 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 = …
Run Code Online (Sandbox Code Playgroud)

javascript mouseevent keyboard-events scroll-snap animateplus

11
推荐指数
1
解决办法
229
查看次数