깜놀하는 해므찌로

Ionic Angular Scroll to Top 앵귤러 페이지 이동 시 스크롤 최상단 배치 예시 feat.smooth 본문

IT

Ionic Angular Scroll to Top 앵귤러 페이지 이동 시 스크롤 최상단 배치 예시 feat.smooth

agnusdei1207 2023. 7. 22. 19:38
반응형
SMALL
<main
  #container
  class="flex w-screen h-screen overflow-x-hidden overflow-y-auto"
>
	<router-outlet (activate)="onActivate($event)"></router-outlet>
</main>

1.

activate

이벤트를 달아줍니다. 페이지가 이동할 때 마다 activate 되겠죠?

2. ViewChild 로 핸들링 하기 위해 #container 

 

 

@ViewChild('container') containerRef!: ElementRef<HTMLElement>;


onActivate(e: any) {
    this.containerRef.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
  }

3. scrollTo 메소드를 활영하여 해당 좌표로 이동합니다. top:0

4. behavior 옵션을 활용하여 smooth 하게 이동합니다.

반응형
LIST
저작자표시 (새창열림)

'IT' 카테고리의 다른 글

Angular floating animation example / 앵귤러 구름 둥둥 애니메이션 앵귤러 애니메이션 파라미터 / angular animation parameter param  (0) 2023.07.24
Angular file Upload 앵귤러 파일 첨부 구현 예시 / Angular Form 활용 예시 email FormGroup  (0) 2023.07.23
NGX Anuglar Store 이론 및 활용 예시  (0) 2023.07.21
Angular Swiper CSS is not working 앵귤러 스와이퍼 CSS 먹통 문제 해결 방안 예시  (0) 2023.07.20
Angular Template async 활용 / Observable 옵저버블 일반 타입 변환 예시  (0) 2023.07.19
'IT' Related Articles more