在按键上应用滚动 animation 与鼠标单击时相同

Question

我有一个水平展开的页面，可以通过鼠标单击或按Space Bar 、 Page Up / Page Down 、 Left Arrow / Right Arrow和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) }) })

Answer 1

您可以在“开关”中使用ArrowRight和ArrowLeft案例。 下面的用法将解决问题。

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":
        {
          scrollPosition++;
           if (scrollPosition === 3) return 
            event.preventDefault()
            animate({
              easing: "out-quintic",
              change: animateScroll(1)
            })
            break
        }
      case "ArrowLeft":
        {
            scrollPosition--;
           if (scrollPosition === 0) return 
            event.preventDefault()
            animate({
              easing: "out-quintic",
              change: animateScroll(-1)
            })
            break
        }
      case "PageUp": 
      case "Home": { 
        if(scrollPosition === 1)
         {
             animate({
              easing: "out-quintic",
              change: animateScroll(-1)
            }) 
         }else
         {
           animate({
             easing: "out-quintic",
             change: animateScroll(-2)
           })
         } 
        scrollPosition = 0;
        break
      }
      case "End": { 
         if(scrollPosition === 1)
         {
             animate({
              easing: "out-quintic",
              change: animateScroll(1)
            })  
         }else
           {
               animate({
                easing: "out-quintic",
                change: animateScroll(2)
              })
           }

        scrollPosition = 2;
        break
      }
    }


  }
}

// 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)
  })
})