[React.js로 만드는 Tech Blog] #4 Window.scrollY/window.pageYOffset

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기

2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용

2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기

---

이슈

작업물의 Preview 이미지를 클릭하면 확대되는 기능을 구현했는데, 이미지를 닫고 원래 페이지로 돌아오면, 브라우저 상단으로 올라가는 이슈가 있었다. 모바일 뷰에서만 해당 문제가 있었지만, 사용하는 UI 라이브러리의 태그 문제인 듯했다.

overlay를 시작할 때 state로 현재 window.scrollY 위치 값을 저장하고, Close 버튼을 눌러 를 빠져나올 때 그 위치로 돌아가도록 했다.

해결

article 태그 내에 image 태그가 존재한다. preview 컴포넌트는 useState를 이용해서 show, yOffSet를 가진다. show가 true일 경우 overlay를 띄우는데, Grommet이 제공하는 <Layer> 기능을 사용했다.
<Layer> 태그는 기본적으로 onEsc, onClickOutside를 통해 화면 바깥과 ESC 키를 이용해 overlay를 빠져나오도록 한다. 나는 버튼을 하나 더 넣어 onClick 이벤트도 만들어주었다.

각각 빠져나올 때 show 값을 false,로, returnYOffset이라는 함수를 호출하도록 했다.

처음 window.scrollY를 쓰려고 했는데 MDN을 확인해보니, scrollY의 다른 이름의 속성이지만, 브라우저 호환성을 위해 window.pageYOffset을 제안하고 있었다. 그러나 IE 9 미만의 올드 브라우저에서는 두 속성 모두 지원이 안 된다.

window.scrollY / window.pageYOffset

원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수를 나타내는 값. 양의 값 = 위쪽 스크롤
문서가 위나 아래로 전혀 움직이지 않은 상태라면 0을 반환한다.

window.pageYOffset === window.scrollY // always returns true