ajax 리스팅, 스크롤 위치 유지 스크립트
마스터욱
0
183
0
0
2025-08-11 02:58:24
class ScrollManager {
constructor(paramKey = 'v', debounceMs = 100) {
this.paramKey = paramKey;
this.vParam = this.getQueryParam(paramKey) || 'default';
this.scrollTimeout = null;
this.isReadyToSave = false; // 게시판 로딩 완료 전까지 저장 금지
this.scrollHandler = this.scrollHandler.bind(this);
}
getQueryParam(param) {
const urlParams = new URLSearchParams(window.search);
return urlParams.get(param);
}
scrollHandler() {
if (!this.isReadyToSave) return; // 저장 금지 상태면 무시
if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(() => {
const scrollPos = window.scrollY;
const key = 'scrollPos_' + this.vParam;
console.log('scrollpos 저장:', key, scrollPos);
sessionStorage.setItem(key, scrollPos);
}, 100);
}
restoreScrollPosition() {
const key = 'scrollPos_' + this.vParam;
const savedPos = sessionStorage.getItem(key);
console.log('scrollpos 복원:', key, savedPos);
if (savedPos !== null) {
window.scrollTo(0, parseInt(savedPos));
}
}
// 게시판 로딩 완료 시 호출
onBoardLoadComplete() {
this.restoreScrollPosition();
this.isReadyToSave = true; // 이제부터 저장 허용
window.addEventListener('scroll', this.scrollHandler);
}
}
// 사용법
const scrollManager = new ScrollManager();
// 게시판 로딩 완료 시점에 호출
// 예: Ajax 성공 콜백 안에서
// scrollManager.onBoardLoadComplete();
