您可以通过按下水平滚动我的演示页Space Bar,Page Up / Page Down和Left Arrow / Right Arrow键。您也可以使用鼠标或触控板捕捉滚动。
但是只有其中一项有效。
键盘事件和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 = …Run Code Online (Sandbox Code Playgroud)javascript mouseevent keyboard-events scroll-snap animateplus