Блог

Я работаю над своим первым скроллером страницы. Я делаю это функциональным способом.

Это работает с событием ‘wheel’. Функция «прокрутка» отвечает за распознавание направления.

Я хотел бы сделать то же самое с событием ‘keydown’, но я получаю сообщение об ошибке

«Неперехваченная ошибка типа: не удалось выполнить «прокрутку» в «Окне»: не удается преобразовать в словарь. в HTMLDocument.eval (scroller.js:75)»

     //Scroller

const rootElement = document.querySelector('#root')
const sections = [...document.querySelectorAll('section')]
let currentSectionIndex = 0;
let isPaused = false;

document.addEventListener( 'wheel', (e) => {

listenScroll(e)

  function listenScroll(e) {
  if(isPaused) return;
  isPaused = true;
setTimeout(() => {
  isPaused = false;
}, 500)

const direction =  e.deltaY < 0 ? -1 : 1;
scroll(direction)
}

function scroll(direction) {

if(direction === 1) {
const isLastSection = currentSectionIndex === sections.length - 1;
if(isLastSection) return;
} else if(direction === -1) {
  const isFirstSection = currentSectionIndex === 0;
  if(isFirstSection) return;
}
currentSectionIndex = currentSectionIndex   direction;
scrollToCurrentSection()
}

function scrollToCurrentSection() {
sections[currentSectionIndex].scrollIntoView({
behavior: "smooth",
block: "start",
})}


})

document.addEventListener('keydown', (e) => {
  if(e.keyCode == 40){scroll(1);}
  else if(e.keyCode == 38){scroll(-1);}
  })
 

Мой JavaScript терпит неудачу. Просто нужно только убрать функции «scroll» и «scrollToCurrentSection» из списка событий wheel.

 //Scroller

const rootElement = document.querySelector('#root')
const sections = [...document.querySelectorAll('section')]
let currentSectionIndex = 0;
let isPaused = false;

document.addEventListener( 'wheel', (e) => {

listenScroll(e)

  function listenScroll(wheelEvent) {
  if(isPaused) return;
  isPaused = true;
setTimeout(() => {
  isPaused = false;
}, 500)

const direction =  e.deltaY < 0 ? -1 : 1;
scroll(direction)
}
})

function scroll(direction) {

  if(direction === 1) {
  const isLastSection = currentSectionIndex === sections.length - 1;
  if(isLastSection) return;
  } else if(direction === -1) {
    const isFirstSection = currentSectionIndex === 0;
    if(isFirstSection) return;
  }
  currentSectionIndex = currentSectionIndex   direction;
  scrollToCurrentSection()
  }

  function scrollToCurrentSection() {
  sections[currentSectionIndex].scrollIntoView({
  behavior: "smooth",
  block: "start",
  })}

document.addEventListener('keydown', (e) => {
  if(e.keyCode === 38){scroll(-1)}
  else if(e.keyCode === 40){scroll(1)}
  })