컨텐츠를 선택하면 모달창이 나타나면 mask창 뒷 배경은 스크롤이 멈추고
모달창을 닫으면 뒷 배경을 기존의 위치에서다시 스크롤하게 하고 싶었다
모달이 열릴때 당시의 스크롤 위치를 기억하고 position을 fix해주고
document.body.style.position = "fixed"; // 스크롤바를 없애준다
document.body.style.top = `-${window.scrollY}px`; // 기존위치를 고정한다
모달이 닫히는 핸들러에서 position을 풀어줬다.
document.body.style.position = ""; // 스크롤바 적용
window.scrollTo({ top: 기존위치 }); // 스크롤바를 기존의 위치로
하지만 모달창을 열고 닫을 때마다 오른쪽 사이드의 스크롤바가 사라졌다가 생기는 공간으로 화면이 계속 흔들렸다
이를 해결하기 위해 모달창이 열릴 때 오른쪽에 스크롤바 만큼의 패딩을 주고
document.body.style.paddingRight = "17px"; // 화면의 흔들림을 커버해준다
모달창이 닫힐때는 패딩을 없애주니 화면이 안정적으로 고정됐다.
document.body.style.paddingRight = "0px"; // 화면의 흔들림 커버