html - div - tooltip bootstrap

¿Cómo llegar a los eventos de desplazamiento?

Question

Necesito obtener eventos de desplazamiento de un div con desbordamiento: desplázate en mi aplicación Angular 2.

Parece que el evento onscroll no funciona en Angular 2.

¿Cómo podría lograr eso?

Answer 1

Escuche window:scroll evento de window:scroll para el desplazamiento a nivel de ventana / documento y evento de scroll de elementos para desplazamiento a nivel de elemento.

ventana: desplazamiento

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

o

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

voluta

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

o

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

@HostListener(''scroll'', [''$event'']) no funcionará si el elemento del host en sí no es capaz de desplazarse.

Ejemplos

• Uso de enlace de eventos
• Usando HostListener

Answer 2

Para el ángulo 4, la solución de trabajo era hacer dentro del componente.

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

Answer 3

Podrías usar un decorador @HostListener. Funciona con Angular 4 en adelante.

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

Answer 4

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

o

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