您可以通过按空格键， 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 = 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中运行。