카테고리 없음

[bootstrap] 모달 창 스크롤 초기화

DEV_HEO 2025. 3. 11. 17:00
320x100

문제 상황

모달창의 스크롤이 밑으로 내려간 상태에서
모달창을 닫고 다시 열면 스크롤이 초기화되지 않고 유지되는 이슈 발생.


모달창 호출 방식

jsp에서 modal 창 html을 포함한 파일을 include하고
$("#modalId").modal('show');  형태로 호출하고 있음.

화면에 계속 모달이 남아있기 때문에 모달을 단순히 show하고 hide하는 형식이라 스크롤은 그대로 유지되는 듯했다.


해결 방법(미해결)

$(document).on('show.bs.modal', '#modalId', function(e){
    $("#modalId").scrollTop(0);
});

대부분 이 방법만 나오는데, 나의 상황에는 적용이 안됐다.

show대신 shown을 사용하면 모달창이 열린 후에 스크롤이 올라가기 때문에 보기가 불편하다.
hidden을 사용해도 적용이 안된다.


해결방법(진짜 해결)

show.bs.modal => hide.bs.modal



아쉬운 점

아주 매의 눈으로 보면
모달창이 닫히기 직전에 모달창 안의 내용과 스크롤(스크롤 애니매이션)이 올라가는게 보인다....
이것도 안보이게 하고싶은데 이건 방법을 더 찾아봐야겠다.




결론 소스

$(document).on('hide.bs.modal', '#modalId', function(e){
    $("#modalId").scrollTop(0);
});


320x100