June.

2024년 1분기 안에는 꼭...

Portfolio

About

사용자의 스크롤 위치 기억하기 (History.scrollRestoration에 대해서)

2023/01/15
짧.

1 min read

사용자의 스크롤 위치 기억하기 (History.scrollRestoration에 대해서)

Locales:

en

ko

tl;dr

사용자가 뒤로가기 버튼을 눌렀을 때 페이지가 원래 스크롤 됐던 위치로 돌아갈지 여부를 설정할 수 있어요.

1const scrollRestoration = history.scrollRestoration; 2if (scrollRestoration === "manual") { 3 console.log( 4 "옵션을 manual로 설정하면 스크롤 위치가 복원되지 않고 사용자가 직접 수동으로 옮겨야 해요." 5 ); 6}

스크롤 복원

Scroll Restoration, 즉 스크롤 복원에 대한 브라우저 History API에 관한 내용이에요. 이 API는 사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때, 페이지가 원래 스크롤되었던 위치로 돌아갈지 여부를 설정할 수 있어요.

기본값은 auto고, 이 값을 manual로 설정하면 스크롤 한 위치를 복원하지 않아요.

1// 사용자가 스크롤한 페이지의 위치가 복원돼요. 2history.scrollRestoration = "auto"; // default 3 4// 페이지의 위치는 복원되지 않아요. 사용자는 해당 위치로 수동으로 스크롤해야 해요. 5history.scrollRestoration = "manual";

참고

  • MDN Web Docs History API scrollRestoration

관련 포스트가 4개 있어요.

useSyncExternalStore가 무엇일까?

짧.
react-use-sync-external-store cover image
2023/10/23 (updated)

React 18 useSyncExternalStore에 대해서

CSS flex box의 align-items의 flex-start와 baseline의 차이점에 대해서

짧.
css-flex-box-align-items-attributes cover image
2023/09/24

CSS에서 align-items의 flex-start와 baseline의 차이점

React 18.0.0 react-dom의 flushSync의 사용법과 주의사항에 대해서 알아보자.

짧.
react-flush-sync cover image
2023/09/24

React flushSync에 대해서

maxLength를 넣고 이모지를 넣으면 브라우저마다 계산되는 것이 다르다.

짧.
html-input-max-length cover image
2023/09/15

HTML `<input />`의 maxLength 동작이 safari에서 다른 이슈

profile

정현수.

Currently Managed

Currently not managed

© 2024. junghyeonsu all rights reserved.