스크롤 이벤트에 참여하는 방법은?

스크롤 이벤트에 참여하는 방법은?

오버플로가 있는 디브에서 스크롤 이벤트를 받아야 합니다: 내 앵글 2 앱에서 스크롤.

Angular 2에서는 스크롤 이벤트가 작동하지 않는 것 같습니다.

어떻게 하면 그것을 이룰 수 있을까요?

// @HostListener('scroll', ['$event']) // for scroll events of the current element
@HostListener('window:scroll', ['$event']) // for window scroll events
onScroll(event) {
  ...
}

아니면

<div (scroll)="onScroll($event)"></div>

@HostListener 데코레이터를 사용할 수 있습니다.Angular 4 이상에서 작동합니다.

import { HostListener } from '@angular/core';

@HostListener("window:scroll", []) onWindowScroll() {
    // do some stuff here when the window is scrolled
    const verticalOffset = window.pageYOffset 
          || document.documentElement.scrollTop 
          || document.body.scrollTop || 0;
}

각도 4의 경우, 작업 솔루션은 부품 내부에서 수행하는 것이었습니다.

@HostListener('window:scroll', ['$event']) onScrollEvent($event){
  console.log($event);
  console.log("scrolling");
} 

를 듣다window:scroll윈도우/슬롯 레벨 스크롤 및 요소의 이벤트scroll요소 레벨 스크롤에 대한 이벤트.

창:선택사항

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {

}

아니면

<div (window:scroll)="onWindowScroll($event)">

두루마리를 치다

@HostListener('scroll', ['$event'])
onElementScroll($event) {

}

아니면

<div (scroll)="onElementScroll($event)">

@HostListener('scroll', ['$event'])호스트 요소 자체가 스크롤 가능하지 않으면 작동하지 않습니다.

예

• 이벤트 바인딩 사용
• HostListener 사용

에 대한 대안@HostListener그리고 RxJS의 Event를 사용하는 것을 제안하는 요소에 대한 출력을 스크롤합니다. 왜냐하면 당신은 그것을 연결할 수 있기 때문입니다.filter()그리고.distinctUntilChanges()그리고 잠재적으로 중복될 수 있는 이벤트의 홍수를 쉽게 건너뛸 수 있습니다(그리고 탐지 내용 변경).

간단한 예는 다음과 같습니다.

// {static: true} can be omitted if you don't need this element/listener in ngOnInit
@ViewChild('elementId', {static: true}) el: ElementRef;

// ...

fromEvent(this.el.nativeElement, 'scroll')
  .pipe(
    // Is elementId scrolled for more than 50 from top?
    map((e: Event) => (e.srcElement as Element).scrollTop > 50),
    // Dispatch change only if result from map above is different from previous result
    distinctUntilChanged());

스크롤 이벤트를 캡처하고 스크롤 이벤트 중 어떤 것이 호출되는지 확인하려면 스크롤 동작을 관찰할 호스트 리스너를 사용해야 합니다. 그러면 이 항목이 호스트 리스너 아래의 기능에서 감지됩니다.

currentPosition = window.pageYOffset;
@HostListener('window:scroll', ['$event.target']) // for window scroll events
scroll(e) {
  let scroll = e.scrollingElement.scrollTop;
  console.log("this is the scroll position", scroll)
  if (scroll > this.currentPosition) {
    console.log("scrollDown");
  } else {
    console.log("scrollUp");
  }
  this.currentPosition = scroll;
}

이 URL에 언급된 여러 예를 확인합니다.

방법 3을 추천해 드리겠습니다.

https://itnext.io/4-ways-to-listen-to-page-scrolling-for-dynamic-ui-in-angular-ft-rxjs-5a83f91ee487

    @Component({
        selector       : 'ngx-root',
        templateUrl    : './app.component.html',
        styleUrls      : [ './app.component.scss' ],
        changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class AppComponent implements OnDestroy {
        
        destroy = new Subject();
        
            destroy$ = this.destroy.asObservable();
        
        constructor() {
            fromEvent(window, 'scroll').pipe(takeUntil(this.destroy$))
                .subscribe((e: Event) => console.log(this.getYPosition(e)));
            }
        
            getYPosition(): number {
            return (e.target as Element).scrollTop;
            }

        ngOnDestroy(): void {
            this.destroy.next();
        }
        
    }

그러나 방법 4는 나쁘지 않습니다.

바퀴 종목

시도(내 경우)scroll이벤트가 작동하지 않음)

<div (wheel)="onScroll($event)"></div>

언급URL : https://stackoverflow.com/questions/41304968/how-to-get-on-scroll-events