https://risha-lee.tistory.com/34

↑위 글과 연결된 글입니다.

지난 글에서 언급했듯이 요청받은 내용은 그냥 스크롤이 보이는 것이 아닌,

스크롤을 이동할 땐 보이지만, 스크롤을 이동하지 않을 땐 숨겨져 있는 기능이었다.

그래서 좀 생각해보았는데 어차피 기본은 안 보이는 것이고,

css를 추가해야만 보이니 class를 이용하여 토글 하면 좋겠다고 생각하였다.

그래서 아래의 코드 형태로 결과를 내게 되었다.

1. scss를 작성한다.

.scroll_view .scroll-content{
  overflow-y: overlay;
}
.scroll_view .scroll-content::-webkit-scrollbar {
  -webkit-appearance: none;
}
.scroll_view .scroll-content::-webkit-scrollbar:vertical {
  width: 3px;
}
.scroll_view .scroll-content::-webkit-scrollbar:horizontal {
  height: 3px;
}
.scroll_view .scroll-content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .5);
}

2. html을 작성한다.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content [ngClass]="scrolling ? 'scroll_view' : ''" 
			(ionScrollStart)="scrollStart()" 
			(ionScrollEnd)="scrollEnd()">
            
            <!-- 본문 내용 작성 -->
            
</ion-content> 

3. ts를 작성한다.

import { Component, NgZone } from '@angular/core';
import { Platform  } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  scrolling = false;

  constructor(public platform: Platform,
              public _zone: NgZone) {
  }

  scrollStart() {
    if (this.platform.is('android')) { 
      console.log("scrollStart");
      this._zone.run(() => {
        this.scrolling = true;
      });
    }
  }

  scrollEnd() {
    if (this.platform.is('android')) { 
      console.log("scrollEnd");
      this._zone.run(() => {
        this.scrolling = false;
      });
    }
  }
}

위의 코드를 적용하여 android에서 실행해보면 스크롤을 이동할 때만 스크롤이 보여지는 것을 볼 수 있다.

여기서 NgZone은 좀 생소할 수도 있는데

일전에 연동되는 변수를 이용하여 화면을 열심히 바꿔도 적용이 되지 않아 찾은 기능이다.

https://angular.io/guide/zone에서 다시 찾아보니

NgZone을 사용하면 HTML에서 업데이트하기 위해 구성 요소의 변경 사항을 자동으로 감지할 수 있다고 한다.

나는 보통 NgZone을 제대로 코드를 작성하였는데도 뭔가 화면 변화가 이루어지지 않을 때, 사용해보는 편이다.

오늘 ionic으로 만든 android app에서 scroll이 보이지 않아 보이게 해 달라는 요청에 의해

scroll이 보이도록 작업하였다.

특이하게도 ionic serve 명령어를 통해 웹으로 띄운 화면에서는 잘 보였는데

ionic cordova bulid 명령어를 통해 android에 올리면 보이지 않았다.

찾아보니 이 문제를 해결하고 싶은 경우가 좀 있었다.

ionic의 오류인 듯싶었다.

내가 적용한 해결법은 그냥 간단히 아래의 코드를 scss에 추가하면 된다.

(하지만 ios에서는 아쉽게도 작동하지 않았다. 추후 ios에서도 방법을 알게 된다면 글을 따로 올리도록 하겠다)

::-webkit-scrollbar {
  -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
  width: 3px;
}
::-webkit-scrollbar:horizontal {
  height: 3px;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .5);
}

하지만 요청받은 내용은 그냥 스크롤이 보이는 것이 아닌,

스크롤을 이동할 땐 보이지만, 스크롤을 이동하지 않을 땐 숨겨져 있는 기능이었으므로

다음 글에서 해당 기능 추가하는 법을 설명하도록 하겠다.

출처 : https://stackoverflow.com/questions/43143299/ionic-scrollbar-is-not-visible-in-android-phone