히스토리 복원 관련한 기능을 구현하던 중 스크롤 이슈에 부딪혔다. 페이지로 다시 복귀했을 때, 스크롤 위치값을 가지고 있는데에도 불구하고 스크롤이 최상단으로 가는 문제였다. 분명 흔하게 사용되는 기능이기 때문에 해결하는 방법이 있을 것 같아 이리저리 찾아 해결한 방법을 소개하고자 한다. 참고로 해결방법은 너무 쉬웠으며, 심지어 이전에 포스팅 했던 내용중에 잠깐 언급된 적도 있었다. (반성해 ㅜㅜ...) ✔️ 정확하게 어떤 상황이었을까? 내가 마주한 상황은 이러했다. 사용자가 페이지에서 스크롤을 내리고, 창을 켜는 등의 어떠한 액션을 한다 -> 해당 페이지를 떠날 때, sessionstorage에 해당 페이지를 특정할 수 있는 고유의 key값과 데이터, 창 오픈 값(T/F), 스크롤 위치 등의 정보를 저장..
web api에는 history라는 개념이 있다. 이를 MDN에서는 다음과 같이 정의하고 있다. History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 즉, 사용자가 브라우저에서 활동한 세션을 기록하고, 이 기록을 조작할 수 있는 방법을 제공한다는 의미이다. history의 속성과 메서드는 그 어떤 것도 상속하지 않으며, 종류는 다음과 같다. 속성 (property) history.length : 현재 페이지 포함, 세션 기록의 길이 (read only) history.scrollRestoration : 기록 탐색 시, 스크롤 위치 복원 여부 명시 history.state : 스택 최상단의 스테이트 값 반환. popst..
- Total
- Today
- Yesterday
- 모바일사파리
- 크롬
- js테스트
- 센트리모니터링
- react
- Git
- sentry
- 깃
- 깃명령어
- frontend
- BFCache
- CSS
- 프론트엔드
- 리액트
- gitRebase
- storybookUI
- 센트리
- 리액트상태관리
- 김민태
- npm
- vue
- js
- javascript
- 프론트앤드
- reacthook
- 자바스크립트
- 리액트훅
- TIL
- 사파리
- 리코일
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |