[javascript] Angular 4에서 클릭시 요소로 스크롤

Program / 글쓴이

버튼을 눌렀을 때 대상으로 스크롤 할 수 있기를 원합니다. 나는 이런 생각을하고 있었다.

<button (click)="scroll(#target)">Button</button>

그리고 내 component.ts방법에서.

scroll(element) {
    window.scrollTo(element.yPosition)
}

위의 코드는 유효하지 않지만 내가 생각하는 것을 보여주기위한 것임을 압니다. Angular에 대한 이전 경험없이 Angular 4를 배우기 시작했습니다. 나는 이와 같은 것을 찾고 있었지만 모든 예제는 Angular 4와 많이 다른 AngularJs에 있습니다.

답변

다음과 같이 할 수 있습니다.

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

그런 다음 구성 요소에서 :

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

편집 : 요소가 정의되지 않아 더 이상 작동하지 않는다는 주석이 표시됩니다. Angular 7에서 StackBlitz 예제 를 만들었는데 여전히 작동합니다. 누군가 작동하지 않는 예를 제공 할 수 있습니까?

답변

실제로 setTimeout또는 requestAnimationFrame또는 jQuery 를 사용하지 않고이를 수행하는 순수한 자바 스크립트 방식이 있습니다.

간단히 말해서 scrollView에서 스크롤하려는 요소를 찾아 scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

여기에 plunkr가 있습니다.

답변

Angular 4를 사용하여 수행 한 방법은 다음과 같습니다.

주형

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

이 기능을 구성 요소에 추가하십시오.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

답변

Angular 7에서 완벽하게 작동합니다.

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

구성 요소에서

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

답변

Jon은 정답을 가지고 있으며 이것은 내 각도 5 및 6 프로젝트에서 작동합니다.

클릭하여 navbar에서 바닥 글로 부드럽게 스크롤하려면 :

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

바닥 글에서 머리글로 다시 스크롤하고 싶었 기 때문에이 함수가있는 서비스를 만들어 navbar 및 바닥 글 구성 요소에 삽입하고 필요한 곳에 ‘header’또는 ‘footer’를 전달했습니다. 실제로 사용 된 클래스 이름을 구성 요소 선언에 제공하는 것을 잊지 마십시오.

<app-footer class="footer"></app-footer>

답변

Angular에서 수행하는 또 다른 방법 :

마크 업 :

<textarea #inputMessage></textarea>

ViewChild()속성 추가 :

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

scrollIntoView()함수를 사용하여 구성 요소 내부에서 원하는 곳으로 스크롤하십시오 .

this.inputMessageRef.nativeElement.scrollIntoView();

답변

아래 코드 블록을 사용하여 뷰의 모든 요소 참조로 스크롤 할 수 있습니다. 대상 (elementref id )은 유효한 html 태그에있을 수 있습니다.

보기 (html 파일)

<div id="target"> </div>
<button (click)="scroll()">Button</button>

온 .ts파일,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}