Горизонтальная прокрутка на полную страницу при нажатии клавиши - PullRequest
Новая
       10

Горизонтальная прокрутка на полную страницу при нажатии клавиши

1 голос
/ 06 ноября 2019

У меня есть полностью горизонтально развернутая страница, которую можно прокручивать, нажимая, например, Пробел , Page Down , Стрелка вправо , Начало , Конец и т. Д. Для навигации.

В настоящее время у меня есть две проблемы, которые я хотел бы решить:

  1. Когдапри нажатии клавиш Стрелка вправо или Стрелка влево страница перемещается немного больше, чем на 100 В, но цель этого - идеально выровнять края страницы по окну.

  2. Если, например, вы нажимаете клавишу Page Down несколько раз, когда достигнете конца страницы, вам потребуется то же число Page Up нажимает для прокрутки назад.

Я был бы очень признателен за любую помощь в решении этой проблемы.

Вот мой код: 

let scrollAmount = 0
const container = document.documentElement

window.onload = () => {
  document.body.onkeyup = event => {
    switch (event.code) {
      case "Space":
      case "PageDown":
      case "ArrowRight": {
        scrollAmount += window.innerWidth
        break
      }
      case "PageUp":
      case "ArrowLeft": {
        scrollAmount -= window.innerWidth
        break
      }
      case "Home":
      case "ArrowUp": {
        scrollAmount = 0
        break
      }
      case "End":
      case "ArrowDown": {
        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
}

body {
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(100%);
  overflow-x: auto
}

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

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>

1 Ответ

1 голос
/ 07 ноября 2019

Добавление event.preventDefault() и изменение слушателя на keydown вместо keyup предотвратит непрерывную прокрутку по умолчанию для клавиш со стрелками. Это работает, потому что прокрутка клавиши со стрелкой запускается, пока она удерживается (что мы теперь предотвратили), в то время как прослушиватель событий запускается только при поднятии клавиши со стрелкой.

Вы можете сделать то же самое (добавитьevent.preventDefault(), то есть) для Home и End для предотвращения горизонтальной прокрутки. 

let scrollAmount = 0
const container = document.documentElement

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

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

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

body {
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(100%);
  overflow-x: auto
}

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

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>
...