img div bootstrap attribute html css angular typescript scrollbar

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)"