Scrolling Go To Top

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다.

01 Scrolling goto top TIL

1. 메서드 선택 근거
1-1. window.scrollY vs window.pageYOffset
두 메서드는 모두 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환하는 메서드다. 문서를 단일 픽셀보다 높은 정밀도를 가진 장치에서 렌더링한 경우 소숫값을 반환한다. 문서가 위나 아리로 전혀 움직이지 않은 상태에는 0을 반환한다. 이를 통해, 문서가 스크롤 되었는지 확인할 수 있다.

window.scrollY https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY
window.pageYOffset https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset
scrollY는 pageYOffset의 다른 이름이다.

window.pageYOffset === window.scrollY;

하지만, scrollY은 IE 및 Safari 등을 지원하지 않지만, pageYOffset는 지원한다. 즉, 호환성에서 차이가 있다.

1-2. window.scroll vs window.scrollTo
두 메서드는 모두 문서 내 창을 특정 위치로 스크롤시키는 메서드다. scroll-icon 버튼을 클릭했을 때, 창을 맨 위로 위치 시키기 위해 사용했다.

window.scroll https://developer.mozilla.org/ko/docs/Web/API/Window/scroll
window.scrollTo https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo
scroll과 scrollTo는 동일한 기능을 가진 다른 메서드이다. 가독성을 위해 더 명확한 이름을 가진 scrollTo 메서드를 사용했다.

window.scroll === window.scrollTo;

2. lodash throttle
throttle이란? throttle은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대한 한 번만 호출되도록 한다. 즉, throttle은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.Scroll event는 짧은 시간동안 굉장히 많이 일어날 수 있기 때문에, throttle을 이용해서 delay를 만들어준다.
throttle은 lodash의 throttle 함수를 통해 구현할 수 있다.
Scroll event는 짧은 시간동안 굉장히 많이 일어날 수 있기 때문에, throttle을 이용해서 delay를 만들어준다.

_.throttle(() => {
  $scrollIcon.style.display = window.pageYOffset >= 300 ? 'block' : 'none';
}, 100);

위 throttle은 100ms를 delay로 하는 throttle 함수이다.

3. 리펙토링

Math.round(window.pageYOffset) >= 300 ? ($scrollIcon.style.display = 'block') : ($scrollIcon.style.display = 'none');

위 코드에서는 의미없는 반복과 의미없는 Math.round를 쓰고 있다.

$scrollIcon.style.display = window.pageYOffset >= 300 ? 'block' : 'none';

<배운점>
++ 비슷한 기능을 하는 메서드 중에서 어떤것을 써야하는지 고민을 해보는 시간을 가졌고 앞으로도 이러한 마음가짐으로 진행을 해 나아야 되겠다.