popup 띄울 때 scroll 방지

popup을 띄울 때 단순히 overflow: hidden;만 넣으면 스크롤은 없어지긴 하는데 다시 스크롤 생길 때 스크롤 이동 현상이 발생

const body = document.querySelector('body');
const btn = document.querySelector('.btn');
let scrollPosition = 0;		// 저장할 스크롤 위치

// 팝업 등장시 이벤트
function openPopup() {
  scrollPosition = window.pageYOffset;
  body.style.overflow = 'hidden';
  body.style.position = 'fixed';
  body.style.top = `-${scrollPosition}px`;
  body.style.width = '100%';
}

// 팝업 닫기 버튼 이벤트
btn.addEventListener('click', () => {
  body.style.removeProperty('overflow');
  body.style.removeProperty('position');
  body.style.removeProperty('top');
  body.style.removeProperty('width');
  window.scrollTo(0, scrollPosition);
});

그래서 위 같은 방식으로 팝업을 띄울 때 스크롤 값을 변수에 할당하고, 스크롤을 없앰.

그리고 팝업이 사라지면 스크롤을 변수가 갖고 있는 위치로 이동시키는 식으로 함.

구글링 하다가 찾았지만 나중에 찾기 편하게 정리해 둠.