스크롤 위치 추적 및 다른 구성 요소에 알림

스크롤 위치 추적 및 다른 구성 요소에 알림

브라우저 스크롤 위치를 추적하여 하나 이상의 구성 요소에 알릴 수 있는 쉬운 방법이 있습니까?

사용 사례:스크롤을 사용하면 현재 위치에 따라 페이지의 다양한 요소 클래스를 변경할 수 있습니다.이전 버전의 Angular에서는 플러그인을 통해 어느 정도 가능했습니다(jQuery도 마찬가지).물론 애플리케이션 시작 시 초기화하고 이벤트를 방출하기 위해 베어 JS를 작성하는 옵션이 있지만, 이는 더럽게 들리고 이벤트 방출은 이러한 유형의 경우 상당히 비쌉니다.

여기서 제가 선택할 수 있는 것은 무엇입니까?

---

업데이트(제안 후):

제가 시도한 것은 다음과 같습니다.

구성 요소를 만들었습니다.

import {Component} from "angular2/core";

@Component({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'},
    template: ''
})

export class TrackScrollComponent {
    track($event) {
        console.debug("Scroll Event", $event);
    }
}

앱의 주 지시어에 속성을 추가했습니다.

<priz-app track-scroll>

그리고 상위 구성 요소의 공급자 중 하나로 구성 요소를 추가했습니다.

import {TrackScrollComponent} from "../../shared/components/track-scroll.component";

@Component({
  selector: 'priz-app',
  moduleId: module.id,
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader, TrackScrollComponent],
  providers: [AuthenticationService]
})

아직 아무것도...

---

다른 업데이트:

옮겨진track-scroll주 템플릿의 div 요소 중 하나로:

<div class="container-fluid" track-scroll>
    <div class="row">
        <div class="col-md-12">
            <app-header></app-header>
            <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
        </div>
    </div>
</div>

그리고 이제 앱은 완전히 빈 화면으로 로드됩니다.재미있는 재미...

---

최종 솔루션(나에게 효과적인 솔루션).

1. 지시문을 정의합니다.

import {Directive} from "angular2/core";

@Directive({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'}
})

export class TrackScrollDirective {
    track($event: Event) {
        console.debug("Scroll Event", $event);
    }
}

2. 이를 사용하는 모든 곳에 지침으로 추가합니다.

directives: [TrackScrollDirective]

3. 이벤트를 추적할 각 요소에 속성을 추가합니다.

<div class="col-md-12" track-scroll>

가장 쉬운 방법은 스크롤 이벤트를 듣는 것이라고 생각합니다.

  @Component({
    ...
    // alternative to `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // see András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }

덜커덕터

다음을 사용하여 플런커@HostListener()

힌트:

bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

모든 구성 요소에 지침을 추가하지 않고 범용으로 만듭니다.directive: [...]목록.

창에서 스크롤하는 여러 요소를 봐야 했기 때문에 이 문제를 다르게 해결할 수밖에 없었습니다.요소의 스크롤 위치를 감시하도록 지시문을 작성했습니다.

@Directive({
  selector: '[scroll]'
})
export class ScrollDir {
  @Output() setScroll = new EventEmitter();
  private scroll: number;

  constructor(private el: ElementRef) { }

  @HostListener('scroll', ['$event'])
  scrollIt() { this.scroll = event.srcElement.scrollTop }

  reset() {  this.el.nativeElement.scrollTop = this.scroll }
}

그런 다음 이 요소가 필요한 스크롤 요소를 포함하는 모든 구성 요소에서 나는 할 수 있었습니다.@ViewChild다음과 같은 지침:

@Component({
  selector: 'parent',
  template: `
    <div class="container" scroll>
      // *ngFor=""...
    </div>
  `
})
export class ParentComp implements AfterViewChecked {

  @ViewChild(ScrollDir) scroll: ScrollDir;

  ngAfterViewChecked() {
    this.scroll.reset()
  }
}

각도 설명서 프로젝트의 일부로 ScrollService에 대한 원본을 확인합니다.

그들이 그 자리를 얻는 방법은.fromEvent(window, 'scroll')

그런 다음 구성 요소에 주입하는 글로벌 서비스에서 다음과 같은 작업을 수행할 수 있습니다.

public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));

그startWith(0)실제로 스크롤할 때까지 스크롤 이벤트가 표시되지 않을 수 있으므로 이 필요합니다.필요한 경우 디바운스를 추가할 수 있습니다.

저도 비슷한 문제가 있었는데, 사용자가 페이지를 스크롤할 때 div를 스크롤해야 했고, 아래 코드에 대한 문제를 해결했습니다.스크롤을 캡처할 구성 요소에서 다음을 수행합니다.

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

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentX {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

단지 이것만, 나는 어떠한 지시나 다른 코드도 만들지 않았습니다. 것이.HostListener되며, 는 "" "" "" "" ""를 얻습니다.window.pageYOffset내 div에게 보낼 것입니다.

도움이 되길 바랍니다.

각도에서 우리는 하위 이벤트 보기를 사용하여 div 내부의 스크롤 위치를 추적할 수 있습니다.

먼저 html에 참조 추가

<div #postion class="scroll-container">
  .......
  .......
</div>

viewchild를 사용하여 refint 파일 선언

@ViewChild('postion', { static: true }) _div: ElementRef;

그러면 ngAfterView 내부Init 함수

 ngAfterViewInit() {
     fromEvent(this._div?.nativeElement, 'scroll').subscribe((e: any) =>  {
         this.scrollPosition = e?.target['scrollTop'];
            });
  }
 

rxjs에서 이벤트에서 가져옵니다.

나중에 이 저장된 위치로 스크롤하려면 다음을 수행할 수 있습니다.

      (this._div.nativeElement as HTMLElement).scrollTop = this.scrollPosition;

언급URL : https://stackoverflow.com/questions/36468318/tracking-scroll-position-and-notifying-other-components-about-it