2
votes

Comment détecter lorsque l'utilisateur arrête le défilement - Angular 5

  @HostListener('window:scroll', ['$event']) 
  onScroll(event) {
    this.scroll = true;
    setTimeout(() => {
      this.scroll = false;
    }, 2000);
  }

typescript angular html

2 commentaires

utilisez-vous un matériau angulaire qui bloque parfois l'événement de défilement?

Non, c'est la première chose à propos de l'événement de défilement dans le projet

3 Réponses :

0
votes

Votre approche fonctionne. Et ce Stackblitz le prouve: https://stackblitz.com/edit/angular-5xcm6h < / p>

Vous avez peut-être une erreur ailleurs.

3 commentaires

Explique. Votre condition de succès est de «masquer un div lorsque l'utilisateur fait défiler et de l'afficher après l'arrêt». Cette condition est remplie. Cependant, si vous souhaitez des changements d'état quasi-instantanés , définissez le délai d'expiration sur 0 ms au lieu de 2000 ms.

Essayez-vous de faire défiler par programme?

Le div a une animation qui fait glisser le div hors de l'écran, cela fonctionne bien à première vue, mais lorsque je défile trop longtemps ou que je fais un défilement lent, le div apparaît.

3
votes

Pour améliorer votre code actuel, appelez clearTimeout lorsque l'événement scroll est détecté. Cela empêchera le div de s'afficher jusqu'à ce que vous arrêtiez le défilement pendant la durée spécifiée.

public scroll = false;
private timeout: number;

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  this.scroll = true;
  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
    this.scroll = false;
  }, 300);
}

Voir this stackblitz pour une démo.

0 commentaires

2
votes

Vous pouvez utiliser le debouncetime de RxJs pour ce cas d'utilisation.

fromEvent(window, "scroll").pipe(
    tap(() => this.scroll = true),
    debounceTime(100)
).subscribe(() => {
    this.scroll = false;
});

Exemple de Stackblitz: https://stackblitz.com/edit/angular-dumymv

0 commentaires