html react scroll top 버튼 스크롤 멈춤 현상

html react  scroll top 버튼 스크롤 멈춤 현상

문제 상황

크롬 브라우저에서 스크롤 탑 버튼을 눌렀을 때 위로 스크롤 되다가 멈추는 현상 발생

  const onClickToTop = () => {
      window.scroll({
        top: 0,
        behavior: "smooth"
      });
  };

문제 원인: 크롬의 smooth scrolling 기능이 켜져 있으면 스크롤이 늦게 멈추게 되는데, 스크롤을 하다가 바로 스크롤 탑 버튼을 누르면 스크롤이 올라가는 중에 스크롤 end 이벤트가 발생하여 멈추게 된다.

smooth scrolling 해제 시 -> behavior: "smooth"를 지정해도 한 번의 스크롤로 상단까지 바로 올라감

• smooth scrolling 설정 시 ->  behavior: "smooth"를 지정하면 여러 번의 스크롤에 걸쳐 상단으로 올라가다가 스크롤 end 이벤트가 발생하여 중간에 멈춤
  
  

 

다른 브라우저는?

파이어 폭스 같은 경우에는 "부드러운 스크롤" 해제하면 각각의 스크롤마다 end 이벤트가 함께 발생하여 문제없이 잘 동작한다.

"부드러운 스크롤"을 적용하면 부드럽게 이동할 때도 스크롤 이벤트가 한번만 발생하여 도중에 멈추는 현상은 없었다.

 

해결

위와 같은 현상이 나타나지 않도록 하려면 3가지 방법이 있다.

1. 위의 현상을 감수하고 그냥 사용하기
2. scroll 메서드에 부드러운 스크롤(behavior: "smooth")을 끄기
3. 스크롤 중일 때는 탑 버튼을 비활성화 시키기
4. 사용자가 스크롤 중에 탑 버튼을 눌렸다면, 스크롤이 멈추고 난 후 window.scroll 메서드를 동작시키기
   -> 단 탑 버튼을 누른 후에도 사용자가 계속 스크롤 할 수 있으므로, 제한 시간을 두기

아래 샌드박스에서는 스크롤 중 탑 버튼을 비활성화하였다.