[Angular.js] 삼성인터넷 scrollIntoView()

개요: 웹개발 중, 삼성인터넷에서 scrollIntoView 함수가 동작하지 않는걸 확인

---

문제점 먼저 얘기하자면, 브라우저 별로 이벤트, 애니메이션 동작, 정책들이 조금씩 다르다.
삼성인터넷에선 angular 스크롤 에니메이션이 잘 안먹힘. 그래서 따로 scss로 에니메이션을 만들어줘야한다.
 
angular에선 @ViewChild라는 데코레이터를 사용하여 html 요소에 직접 닿을 수 있는데, 그중 scrollIntoView() 함수가 있음.
 

<!-- 내가 건드릴 div에 #변수명 을 작성 -->
<div #topElement class="main-container"></div>

export class MainPageComponent {
  // ViewChild를 활용해, html 요소를 직접 다룸
  @ViewChild('topElement', { static: false }) topElement: ElementRef;
  
  
    eventFunc(event) {
    if (event) {
      // 욘석이 문제. behavior나, block 등, option요소들이 삼성인터넷에선 먹히지 않음
      this.topElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

 

export class MainPageComponent {
  // ViewChild를 활용해, html 요소를 직접 다룸
  @ViewChild('topElement', { static: false }) topElement: ElementRef;
  
  
    eventFunc(event) {
    if (event) {
      // 이벤트 옵션을 없애고, scss에서 에니메이션을 따로 제작하여 사용해야함!
      this.topElement.nativeElement.scrollIntoView();
    }
  }
}

 
웹개발을 한다면, 꼭 여러 브라우저에서 자신이 만든 걸 테스트 해보길 권함.