준비

Ionic 프레임워크는 웹 기반이기 때문에 body 의 height 가 100vh 가 넘어간다면 자동으로 스크롤바가 표시된다.

ionic serve --lab 명령 등을 이용해 현재 ios 및 android 상태를 보면서 개발을 하는 경우 스크롤바가 거슬릴 수 있다.

그렇다고 스크롤 기능까지 없애버리면 단점이 많기 때문에 스크롤 기능이 정상 작동하는 상태에서 스크롤바만 안보이게 처리를 해보겠다.

만약 아래와 같이 hidden 처리해서 스크롤바를 없앤다면 스크롤 기능도 사용이 불가능하기 때문에 내가 원하는 상태가 아닌 것이다.

ion-content {
  overflow: hidden; /* 스크롤 기능까지 작동이 안된다 */
}

해결

해결 방법은 생각보다 간단했다.
( 앵귤러 버전 기준 ) src 폴더 → grobal.scss 파일에

ion-content {
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

위 코드를 추가하면 된다.
코드를 추가한 뒤 실행시키면 스크롤바는 없으나 스크롤 기능은 정상 작동하는 것을 확인할 수 있다.

필자도 Ionic 프레임워크로 앱 개발을 할 때는 무조건 이용하는 방법이다.

혹시 위 방법보다 효율적인 방법을 알고있다면 댓글에 공유해주길 바란다.