[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 버튼을 눌러 를 빠져나올 때 그 위치로 돌아가도록 했다.

해결

	function returnYOffset(y) {
	if (window.pageYOffset === 0) {
	window.scrollTo(0, y);
	}
	}
	const Preview = (props) => {
	const [show, setShow] = useState();
	const [yOffSet, setYOffSet] = useState();
	return (
	<Box tag='article'
	direction='row'
	flex
	align='center'
	margin={{top: 'small', bottom: 'small'}}
	border={{side: 'all', color: 'dark-2'}}
	round
	pad='small'
	style={{
	width: '100%',
	height: 'auto',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	overflow: 'hidden',
	}}
	>
	<Image
	src={props.image.src}
	alt={props.image.alt}
	onClick={() => {
	setYOffSet(window.pageYOffset);
	setShow(true)
	}}
	style={{
	flexShrink: '0',
	maxWidth: '100%',
	maxHeight: '100%',
	borderRadius: '12px',
	}}
	/>
	{show && (
	<Layer
	onEsc={() => {
	setShow(false);
	returnYOffset(yOffSet)
	}}
	onClickOutside={() => {
	setShow(false)
	returnYOffset(yOffSet)
	}}
	margin='xlarge'
	>
	<Box
	pad='small'
	direction='column'
	flex
	background='paper'
	>
	<Image
	fit='contain'
	src={props.image.src}
	alt={props.image.alt}
	style={{borderRadius: '12px', paddingTop: '1rem'}}
	/>
	<Box
	pad='small'
	alignSelf='end'
	>
	<Button
	style={{ width: '100%'}}
	primary
	hoverIndicator='light-1'
	color='logoGreen'
	label='close'
	onClick={(e) => {
	setShow(false)
	returnYOffset(yOffSet)
	}} />
	</Box>
	</Box>
	</Layer>
	)}
	</Box>
	)}

view raw layer.js hosted with ❤ by GitHub

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