iOS에서도 유효한 레이어팝업

body에 scroll touchmove mousewheel를 했을 때 e.preventDefault() 하는 방법을 사용하면

스크롤탑이 맨 위로 이동된 모습이 보이기 때문에, 풀팝업으로 화면이 바로 가려지는 게 아니라면 position fixed 를 사용하는 방법이 좋을 듯 하다.

(우측에서 좌측으로 오는 햄버거 메뉴나 딤드처리된 레이어팝업 등)

// 팝업을 열 때
function openPopup() {
  // 스크롤 위치 저장
  var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

  // body 스크롤 막기
  document.body.classList.add('noscroll');
  document.body.style.top = '-' + scrollPos + 'px';
}

// 팝업을 닫을 때
function closePopup() {
  // body 스크롤 가능하도록 하기
  document.body.classList.remove('noscroll');

  // 스크롤 위치 복원
  var scrollPos = document.body.style.top;
  document.body.style.top = '';
  window.scrollTo(0, parseInt(scrollPos || '0') * -1);
}

noscroll 의 css코드는 아래와 같다

.noscroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}