[감성82] 모달창 스크롤 원위치 시키기

🐛 모달창 스크롤 원위치 시키기

이전 글에서 만난 버그이다. 모달을 닫았을 때, 스크롤을 원위치 시키고 싶은데, 제대로 동작하지 않는다. 어떻게 해결하면 좋을지, 구글신에게 물어보았다.

Try

출처 : https://newbedev.com/how-to-scroll-to-the-top-of-a-modal-window-in-javascript

모달에 scrollTop(0) 을 주면 된다고 한다 ! MDN에 검색해보니 scrollTop 은 요소의 최상단 부터 현재 위치까지의 거리 pixel을 값이라고 한다. 스크롤이 없을 때의 값은 0. 왠지 될 것같은 너낌이 든다. 바로 ㄱㄱ

// 이미지 모달창 닫기 버튼
closeBtn.addEventListener("click", (e) => {
  modal.style.display = "none";
  modal.scrollTop(0);
  modalContent.innerHTML = "";
  feedSection.classList.remove("modal_active");
  body.classList.remove("modal_active");
});

// 이미지 모달창 영역 밖 클릭 시 닫기
modal.addEventListener("click", (e) => {
  if (e.target.classList.contains("modal-overlay")) {
    modal.style.display = "none";
    modal.scrollTop(0);
    modalContent.innerHTML = "";
    feedSection.classList.remove("modal_active");
    body.classList.remove("modal_active");
  }
});

그러나 제대로 동작하지 않았다. 게다가 모달을 열었을 때, 모달 뒤의 스크롤을 막기 위해 body에 주었던 modal_active 클래스가 사라지지 않고 그대로 유지되었다. 혹시 내 모달은 X축으로 움직이니까 scrollLeft(0) 인가? 싶었지만 어림도 없었다.

추가로 stackoverflow에 검색해서 scrollTo(0, 0), animate({ scrollTop: 0 }) 등 여러 방법을 써보았지만 전부 제대로 동작하지 않았다.

3시간 동안 씨름하다 해결하지 못하고 다음 날이 되었다. 더 찾을 곳도 없고, 도저히 모르겠어서 멘토님에게 조언을 구했다. 그랬더니 scrollTop(0) 이 아닌, scrollTop 을 하면 된다고 한다. 기본 값이 0이었는데 이걸로 될까? 싶었는데 역시나 되지 않았다.

Solve

'모달을 닫을 때 초기화 하지말고 모달을 열 때 초기화를 해줘도 되잖아?' 라는 생각이 문득 들었다. 바로 코드를 추가해 주니 해결됐...네?
엉? 않이...나 뭐한거...

찾았던 방법들을 써보니 다음과 같았다 ^^...

modal.scrollTop; // O
modal.scrollTop(0); // X
modal.scrollTo(0, 0);  // O
modal.animate({ scrollTop: 0 });  // X

📝결론

고정 관념에 빠지지 말자.