body overflow hidden IOS오류?

모달이나 팝업같은 UI를 만들때 body 컨텐츠 영역이 스크롤하는 것을 방지해야하는 필요가 있습니다.

그래서 필자는 모달이나 팝업이 떠있을때 body에 추가로 클래스를 부여해서 overflow-hidden을 함으로 데스크탑에서는 스크롤을 방지했었다.

하지만 모바일 테스트를 하면서 IOS에서는 overflow-hidden이 되어도 스크롤이 되는 문제가 있었고

html, body {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hideen;
  /* 이외의 브라우저 */
  overscroll-behavior: none;
}Code language: CSS (css)

위 코드를 통해서 IOS에서도 Body overflow hidden을 제대로 적용해줄 수 있었다.

추가로 최신 브라우저를 사용하는 경우 간단하게 css의 touch-action을 통해서 스크롤을 방지할 수 있습니다.

간단하게 css로 구성할수도있고

필자는 요즘 willmcpo/body-scroll-lock: Body scroll locking that just works with everything 😏 해당 라이브러리를 사용해서 Body Scroll을 Lock한다