화면을 스크롤 했을 때 화면의 맨 위로 올라가도록 이벤트 / 전체 이벤트가 스크롤로 바뀌고, 스크롤이 느리게 올라가는 오류 해결

홈 화면에서 홈 화면 영역에서 절반으로 스크롤을 내렸을 때 버튼을 보이게 해서 화면의 가장 위로 올라갈 수 있도록 이벤트 처리하기

우선 화면에서 스크롤을 할 때 그 화면의 높이가 홈 화면의 높이를 넘어가게 되면, 이벤트를 적용할 버튼을 보이게 하고, 스크롤 이벤트를 적용하는 코드를 작성했다.

그런데, 우선 화면 영역에 따라 버튼을 보이고, 감추는 것은 잘 적용되었으나,

스크롤 이벤트를 따로 정의해 놓은 함수를 부르는 과정에서 생각하는 것과는 다르게 제대로 작동이 되지 않고있다.

현재 문제점

- 스크롤이 너무 느리게 적용되는 점

- 홈 화면에 어느정도 가까워 지면 그때는 원래 적용되어야 되는 속도로 적용이 되는 점

가장 큰 문제는 그냥 홈 화면에서 스크롤 영역이 홈 화면을 벗어나게 되면, 모든 이벤트가 다 홈 화면으로 가는 이벤트가 먹히고 있다.

const moveBtn = document.querySelector('.fa-arrow-up');

document.addEventListener('scroll', () => {
  if (window.scrollY > homeHeigth / 2) {
    moveBtn.style.display = 'inline';
    handleMoveBtn();
  } else {
    moveBtn.style.display = 'none';
  }
});

let handleMoveBtn = () => {
  scrollIntoView('#home');
}

moveBtn.addEventListener('click', handleMoveBtn);

문제 해결하기

클래스를 하나 추가해서 화면 영역이 홈 화면의 영역의 반을 넘어가게 되면 버튼이 보이면서, 버튼이 클릭되게 변경하였다.

이벤트 핸들러를 따로 만들어서 조건이 맞을 때 조건문 안에서 호출을 했는데 그렇게 하니까 모든 이벤트들이 이 이벤트로 덮어씌워지는 문제가 발생했다.

조건문 안에서는 클래스를 추가하고,
스크롤 이벤트를 안에서 호출하던 것을 지우고 문제를 해결할 수 있었다.

/* Show "arrow up" button when scrolling down */
const arrowUp = document.querySelector('.arrow-up');

document.addEventListener('scroll', () => {
  if (window.scrollY > homeHeigth / 2) {
    arrowUp.classList.add('visible');
  } else {
    arrowUp.classList.remove('visible');
  }
});

/* Handle click on th "arror up" button */
arrowUp.addEventListener('click', () => {
  scrollIntoView('#home');
});