在按键上应用滚动动画，使其与单击鼠标时相同

Question

我有一个水平分布的页面，可以通过单击鼠标或按空格键，上一页/下一页]，左箭头/右箭头和Home / End键。

通过鼠标单击激活的滚动使用Animate Plus进行动画处理。

当按键滚动时，如何获得完全相同的动画？

由于我的代码无法在Stack Overflow的代码段中运行，因此我将其发布到了Codepen。

这是我的完整代码：

https://codepen.io/boletrone/pen/MWWZrPQ

下面是我的JavaScript代码：

import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"

// Scroll on key presses
// =====================

let scrollPosition = 0
const maxScrollPosition = document.body.scrollWidth - window.innerWidth
const container = document.scrollingElement

window.onload = () => {
  document.body.onkeydown = event => {
    switch (event.code) {
      case "Space":
      case "PageDown":
      case "ArrowRight":
      case "ArrowDown": {
        event.preventDefault()

        if (scrollPosition === maxScrollPosition) return // If at the end, return
        scrollPosition += window.innerWidth
        break
      }
      case "PageUp":
      case "ArrowLeft":
      case "ArrowUp": {
        event.preventDefault()

        if (scrollPosition === 0) return // If at the beginning, return
        scrollPosition -= window.innerWidth
        break
      }
      case "Home": {
        scrollPosition = 0
        break
      }
      case "End": {
        scrollPosition = container.scrollWidth
        break
      }
    }

    container.scrollTo({
      top: 0,
      left: scrollPosition
    })
  }
}

// Scroll on mouse clicks
// ======================

const goToPreviousSectionButton = document.createElement("button")
const goToNextSectionButton = document.createElement("button")

document.body.appendChild(goToPreviousSectionButton)
document.body.appendChild(goToNextSectionButton)

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 animateScroll = dir => {
  const from = container.scrollLeft
  const { left } = getNextSection(dir).getBoundingClientRect()
  return progress => (container.scrollLeft = from + progress * left)
}

goToPreviousSectionButton.addEventListener("click", () => {
  animate({
    easing: "out-quintic",
    change: animateScroll(-1)
  })
})

goToNextSectionButton.addEventListener("click", () => {
  animate({
    easing: "out-quintic",
    change: animateScroll(1)
  })
})

我有一个水平分布的页面，可以通过单击鼠标或按空格键，Page Up / Page Down，向左箭头/向右箭头以及Home / End键来滚动页面。已激活的滚动...

Answer 1

您可以在“开关”中使用ArrowRight和ArrowLeft大小写。