html - div - tooltip bootstrap
¿Cómo llegar a los eventos de desplazamiento? (4)
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?
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
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");
}
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;
}
// @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)"