Angular 4에서 클릭 한 번으로 요소까지 스크롤

Angular 4에서 클릭 한 번으로 요소까지 스크롤

버튼을 누르면 타겟까지 스크롤 할 수 있게 되고 싶다.나는 이런 생각을 하고 있었다.

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

그리고 내 안에component.ts같은 수법

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

위의 코드가 유효하지 않다는 것을 알고 있으며, 단지 제가 생각하고 있던 것을 보여주기 위해서입니다.저는 Angular 4를 배운 지 얼마 안 돼서 Angular 4를 배운 지 얼마 안 됐어요.이런 걸 찾아다녔는데 모든 예제가 Angular Js에 있는데 Angular 4와 많이 달라요.

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

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

다음으로 컴포넌트에서 다음을 수행합니다.

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

편집: 요소가 정의되지 않았기 때문에 더 이상 작동하지 않는다는 댓글이 표시됩니다.Angular 7에서 StackBlitz의 예를 작성했는데 아직 작동합니다.어떤 분이 안 되는 예를 들어주실 수 있나요?

In Angular 13은 완벽합니다.

HTML

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

인컴포넌트

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

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();
}

실제로 사용하지 않고 이를 달성할 수 있는 순수한 Javascript 방법이 있습니다.setTimeout또는requestAnimationFrame또는 jQuery.

즉, 스크롤 뷰에서 스크롤할 요소를 찾아 사용합니다.scrollIntoView.

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

여기 플렁크러가 있습니다.

Jon이 정답을 가지고 있고, 이것은 나의 각진 5와 6 프로젝트에서 효과가 있습니다.

클릭하여 탐색 모음에서 바닥글까지 부드럽게 스크롤하려면:

<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' });
}

저는 바닥글에서 머리글까지 스크롤하고 싶었기 때문에 이 기능이 있는 서비스를 만들고 그것을 네비게이션 바 및 바닥글 컴포넌트에 삽입하여 필요에 따라 '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' });
}

각도에서는 다음을 사용할 수 있습니다.ViewChild그리고.ElementRef: HTML 요소에 참조를 제공합니다.

<div #myDiv></div> 

컴포넌트 내부:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

사용할 수 있습니다.this.myDivRef.nativeElement본론으로 들어가다

다음과 같이 각도 DOM 요소에 대한 참조를 사용하여 이를 달성할 수 있습니다.

stackblitz의 예를 다음에 나타냅니다.

컴포넌트 템플릿:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

스크롤이 지나치면

올바른 y 좌표를 가져와 window.scrollTo({top: y, 동작: 'smooth'})를 사용합니다.

여러 요소를 사용하는 경우 다른 y 좌표 설정

HTML 파일

<div class="sub-menu">
  <button (click)="scroll('#target1', -565)">Target One</button>
  <button (click)="scroll('#target2', -490)">Target Two</button>
</div>

<div>
  <div id="target1">Target One</div>
</div>

<div>
  <div id="target2">Target Two</div>
</div>

ts 파일

  scroll(elem: string, offset: number) {
    const yOffset = offset;
    const element = document.querySelector(elem)!;
    const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

    window.scrollTo({ top: y, behavior: 'smooth' })
  }

가장 방법을. 즉, 입니다.그것은 다음과 같은 DOM 명령어를 사용하는 것입니다.Element.scrollIntoView() 「」

document.getElementById("<yourTarget>").scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "nearest"
});

추가해 .id="<yourtarget>"은 꽤, 한 결과 을 알 수 !개발도 잘 되고, 꽤 간단했지만, 실제 가동 환경에 도입해 보니 스크롤이 동작하지 않는 것을 알 수 있었습니다.

[ Angular ](각도) [Viewport Scroller](Viewport Scroller) [Viewport Scroller](Viewport Scroller).예: ViewportScroller).constructor(private scroller: ViewportScroller) 하면 돼this.scroller.scrollToAnchor("<yourTarget>");이번에도 큰 문제는 아니지만 실제 가동 환경에서는 작동하지 않았습니다.

세 번째 방법은 라우터를 사용하여 원하는 앵커에 네비게이션을 제공하는 것입니다.마지막 옵션과 마찬가지로 라우터를 컨스트럭터에 주입합니다.

constructor(private router: Router) 를 사용합니다.this.router.navigate([], { fragment: "<yourTarget>" });드디어 실가동 환경에서도 동작했습니다!이전 메서드가 실패한 이유를 확실히 알 수 없습니다. Angular Material은 크롤링을 차단합니다.

다양한 옵션을 제시하기 위해 Stackblitz를 예로 들 수 있습니다.

https://stackblitz.com/edit/scrolling-types

여기서 트리 버튼을 클릭할 수 있습니다.각각 다른 방법을 사용하여 어떤 앵커까지 스크롤 다운할 수 있습니다.

맨 위의 답변이 내 컴포넌트 전체를 이동시켜 페이지 영역을 차단했습니다.몇 가지 속성을 추가하여 수정했습니다.

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

커스텀 HTML 요소를 사용하기 때문에 이 트릭을 해야 합니다.하지 , 「 」가 됩니다.targetonItemAmounterClick 갖지 못하다scrollIntoView

.disclosed(비활성화)

<div *ngFor"...">
      <my-component #target (click)="clicked(target)"></my-component>
</div>

.ts

onItemAmounterClick(target){
  target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}

이를 수행하려면 jquery를 사용합니다.

ts 코드:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

html 코드:

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

스크롤할 요소에 적용합니다.

<div id="elementTo">some content</div>

여기 스택블리츠 샘플이 있습니다.

언급URL : https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4