web-dev-qa-db-ja.com

スクロールイベントに参加する方法は？

Angular 2アプリでスクロールするdivからオーバーフローイベントを取得する必要があります。

onscroll event はAngular 2では機能しないようです。

どうすればそれを達成できますか？

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

または

<div (scroll)="onScroll($event)"
73
Günter Zöchbauer

angular 4の場合、作業ソリューションはコンポーネント内で行うことでした

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

@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;
}
21
Uliana Pavelko

ウィンドウ/ドキュメントレベルのスクロールのwindow:scrollイベントと、エレメントレベルのスクロールの要素のscrollイベントをリッスンします。

window：scroll

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

}

または

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

scroll

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

}

または

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

Host要素自体がスクロール可能でない場合、@HostListener('scroll', ['$event'])は機能しません。

例

10
kodebot