body overflow hidden IOS 오류

모달이나 팝업같은 UI를 구현할 때 body 영역이 스크롤 되는 것을 막아햐 하는 경우가 있다. 이 경우, 모달이나 팝업이 떠 있을 때, body에 클래스를 부여하여 overflow:hidden을 추가하여 body 스크롤을 방지할 수 있다.

하지만!! 모바일 IOS에서는 여전히 스크롤이 되는 이슈가 있었다. 😫😫 (역싀 모바일 계의 IE...사파리..)

 

구글링을 하며 다양한 해결 방법을 접했지만, 완벽한 해결 방법을 찾기가 쉽지 않았다. 그나마 적용도 쉽고 내가 원하는대로 작동하는 소스를 찾아서 적용하였다. 적용한 방법은 아래와 같다. 

 

html, body {
  touch-action: none; /*최신 브라우저의 경우 이 속성만으로 스크롤 막기 가능*/
  -webkit-overflow-scrolling: none;
  overflow: hideen;
  /* 이외의 브라우저 */
  overscroll-behavior: none;
}

// 모달 팝업 오픈
$(window).bind('touchmove', handler);

// 모달 팝업 닫기 
$(window).unbind('touchmove', handler);

let handler = function(e) { 
    e.preventDefault();
}