스크롤 위치 이동 관련 문의 드립니다.
본문
안녕하세요
뒤로가기시 스크롤 위치 이동
---
var sc = parseInt(get_scroll_position()); // 세션스토리지에 저장된 위치 값
// 스크롤 위치 이동
window.scrollTo({
top: sc,
behavior: 'smooth'
});
---
이렇에 하니 아이폰 / 안드로이드 다 위치 이동합니다.
그런데, 가끔 위치가 다르게 이동하는 현상있습니다.
그래서,
다른방법을 생각했는되요
예를 들어서
<div class="good">
<ul class="get_list">
...
<li id="11">컨텐츠</li>
<li id="12">컨텐츠</li>
<li id="13">컨텐츠</li>
<li id="14">컨텐츠</li>
<li id="15">컨텐츠</li> >>> 내가 본 위치
<li id="16">컨텐츠</li>
<li id="17">컨텐츠</li>
<li id="18">컨텐츠</li>
...
</ul>
</div>
아이디 값 15를 세션스토리지에 저장한 후
뒤로 갔을때 세션스토리지에서 가져와 15 위치로 이동하면 더 정확하게 본 위치를 가져올 수 있지 않을까 해서요
혹시, 이런 방법도 있나요? 조언 구합니다.
답변 1
이방법은 어떠실지요~
1.현재 위치 정보(ID)를 세션 스토리지에 저장합니다.
// 현재 위치(ID)를 세션 스토리지에 저장
var currentPosition = 15; // 예시로 ID 15를 현재 위치로 가정
sessionStorage.setItem('currentPosition', currentPosition);
2. 뒤로 가기 시 저장된 위치(ID)를 세션 스토리지에서 가져옵니다.
// 저장된 위치(ID)를 세션 스토리지에서 가져옴
var savedPosition = sessionStorage.getItem('currentPosition');
3. 가져온 위치(ID)로 스크롤을 이동합니다.
// 가져온 위치(ID)로 스크롤 이동
var element = document.getElementById(savedPosition);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
ㄴ리스트를 ajax 로 불러오는 되요
var element = document.getElementById(savedPosition);
=> null 값으로 반환하는되요 이유가 뭘까요?
ㄴ var element = document.querySelector('#'+curId); 이렇게하니 되네요.
리스트 가운데 정렬도 가능할까요? block -> center 주면 되더라구요 ^^
ㄴ element.scrollIntoView({ behavior: 'smooth', block: "center" });
도움받아서 잘 처리 되었습니다. 감사합니다. 스크롤 보다 좀더 정확하네요