当到达页面的开头或结尾时，按键会被“记住”

Question

我有一个完全水平展开的页面，可以通过按下来滚动，例如，Space Bar, Page Down, 向右箭头, 主页, 结束 等导航。

我遇到的问题是，例如，如果您在到达页面末尾时多次按 Page Down 键，您将获得相同的数字Page Up 次按下可向后滚动。例如，如果您多次按 向左箭头 ，然后尝试向右移动，则在页面开头也会发生同样的情况。

如何解决这个问题，以便在到达页面开头或结尾时不会“记住”按键？

您可以运行我的代码如下：

let scrollAmount = 0
const container = document.documentElement

window.onload = () => {
  document.body.onkeydown = event => {
    switch (event.code) {
      case "Space":
      case "PageDown":
      case "ArrowRight":
      case "ArrowDown": {
        event.preventDefault()
        scrollAmount += window.innerWidth
        break
      }
      case "PageUp":
      case "ArrowLeft":
      case "ArrowUp": {
        event.preventDefault()
        scrollAmount -= window.innerWidth
        break
      }
      case "Home": {
        scrollAmount = 0
        break
      }
      case "End": {
        scrollAmount = container.scrollWidth
        break
      }
    }

    container.scrollTo({
      top: 0,
      left: scrollAmount,
      behavior: "smooth"
    })
  }
}

// Reset the scrollAmount if the user scrolls back manually.
window.onscroll = event => {
  scrollAmount = container.scrollLeft
}

* {
  margin: 0;
  padding: 0
}

html { height: 100% }

html, body, section {
  display: flex;
  flex-grow: 1
}

section {
  display: grid;
  place-items: center;
  flex: 1 0 100%
}

section:nth-of-type(1) { background: orange }
section:nth-of-type(2) { background: limeGreen }
section:nth-of-type(3) { background: royalBlue }

h2 { color: white }

<section><h2>1</h2></section>
<section><h2>2</h2></section>
<section><h2>3</h2></section>

Answer 1

添加限制，如果您处于开头或结尾，将阻止您递增 scrollAmount：

开始 - scrollAmount 是 0
结束-scrollAmount等于body.scrollWidth - window.innerWidth（整个正文宽度-一页宽度）

let scrollAmount = 0
const container = document.documentElement

window.onload = () => {
  document.body.onkeydown = event => {
    switch (event.code) {
      case "Space":
      case "PageDown":
      case "ArrowRight":
      case "ArrowDown":
        {
          event.preventDefault()
          const maxScroll = container.scrollWidth - window.innerWidth
          if(scrollAmount === maxScroll) return; // if at the end, return
          scrollAmount += window.innerWidth
          break
        }
      case "PageUp":
      case "ArrowLeft":
      case "ArrowUp":
        {
          event.preventDefault()
          
          if(scrollAmount === 0) return; // if at the start return
          scrollAmount -= window.innerWidth
          break
        }
      case "Home":
        {
          scrollAmount = 0
          break
        }
      case "End":
        {
          scrollAmount = container.scrollWidth - window.innerWidth
          break
        }
    }

    container.scrollTo({
      top: 0,
      left: scrollAmount,
      behavior: "smooth"
    })
  }
}

// Reset the scrollAmount if the user scrolls back manually.
window.onscroll = event => {
  scrollAmount = container.scrollLeft
}

* {
  margin: 0;
  padding: 0
}

html { height: 100% }

html, body, section {
  display: flex;
  flex-grow: 1
}

section {
  display: grid;
  place-items: center;
  flex: 1 0 100%;
}

section:nth-of-type(1) { background: orange }
section:nth-of-type(2) { background: limeGreen }
section:nth-of-type(3) { background: royalBlue }

h2 { color: white }

<section>
  <h2>1</h2>
</section>
<section>
  <h2>2</h2>
</section>
<section>
  <h2>3</h2>
</section>

当到达页面的开头或结尾时，按键会被“记住”

Key presses get “remembered” when the beginning or the end of the page is reached

javascript

scroll

keyboard-events

ecmascript-6