web-dev-qa-db-fra.com

Angular 4 - Animation de défilement

Je crée une page Web ayant des div en largeur/hauteur de page complètes . Pendant le défilement, j'ai deux types de méthodes.

Faites défiler sur Click 

//HTML
<a (click)="goToDiv('about')"></a>

//JS
    goToDiv(id) {
        let element = document.querySelector("#"+id);
        element.scrollIntoView(element);
      }

Faites défiler sur HostListener 

  @HostListener("window:scroll", ['$event'])
  onWindowScroll($event: any): void {
    this.topOffSet = window.pageYOffset;
    //window.scrollTo(0, this.topOffSet+662);
  }

1. Comment ajouter un effet d'animation de défilement?

Juste comme :

$('.scroll').on('click', function(e) {
    $('html, body').animate({
        scrollTop: $(window).height()
    }, 1200);
});

2. Et comment utiliser HostListener pour faire défiler jusqu'au prochain div?

javascriptcssangularangular-animations
22
Sumit Ridhal

Celui-ci est amusant. La solution, comme avec la plupart des choses angulaires 2, est observable.

  getTargetElementRef(currentYPos: int): ElementRef {
      // you need to figure out how this works
      // I can't comment much on it without knowing more about the page
      // but you inject the Host ElementRef in the component / directive constructor and use normal vanillaJS functions to find other elements
  }
  //capture the scroll event and pass to a function that triggers your own event for clarity and so you can manually trigger
  scrollToSource: Subject<int> = new Subject<int>();
  @HostListener("window:scroll", ['$event'])
  onWindowScroll($event: any): void {
    var target = getTargetElementRef(window.pageYOffset);
    this.scrollTo(target);
  }

  scrollTo(target: ElementRef): void {
     // this assumes you're passing in an ElementRef, it may or may not be appropriate, you can pass them to functions in templates with template variable syntax such as: <div #targetDiv>Scroll Target</div> <button (click)="scrollTo(targetDiv)">Click To Scroll</button>
     this.scrollToSource.next(target.nativeElement.offsetTop);
  }

  //switch map takes the last value emitted by an observable sequence, in this case, the user's latest scroll position, and transforms it into a new observable stream
  this.scrollToSource.switchMap(targetYPos => {
       return Observable.interval(100) //interval just creates an observable stream corresponding to time, this emits every 1/10th of a second. This can be fixed or make it dynamic depending on the distance to scroll
           .scan((acc, curr) =>  acc + 5, window.pageYOffset) // scan takes all values from an emitted observable stream and accumulates them, here you're taking the current position, adding a scroll step (fixed at 5, though this could also be dynamic), and then so on, its like a for loop with +=, but you emit every value to the next operator which scrolls, the second argument is the start position
           .do(position => window.scrollTo(0, position)) /// here is where you scroll with the results from scan
           .takeWhile(val => val < targetYPos); // stop when you get to the target
  }).subscribe(); //don't forget!

En un clic, c'est facile à utiliser. Vous venez de lier scrollTo à un clic

Cela ne fonctionne que pour le défilement dans une direction. Toutefois, cela devrait vous aider à démarrer. Vous pouvez rendre l'analyse plus intelligente afin qu'elle soustrait si vous devez monter, et utilisez plutôt une fonction à l'intérieur de takeWhile qui détermine la condition de terminaison correcte en fonction de la hausse ou de la baisse.

10
bryan60

Vous pouvez également utiliser la propriété css scroll-behaviour: smooth

en combinaison avec var yPosition = 1000; window.scrollTo(0,yPosition)

Ref: https://developer.mozilla.org/fr/docs/Web/CSS/scroll-behavior

3
Julien

La réponse @ bryan60 fonctionne, mais je n'étais pas à l'aise avec cela et j'ai préféré utiliser TimerObservable qui semble moins déroutant pour les autres coéquipiers et également plus facile à personnaliser pour les utilisations futures.

Je suggère que vous ayez un service partagé lorsque vous touchez à DOM ou que vous travaillez avec des problèmes de défilement et autres éléments liés aux éléments HTML; Ensuite, vous pouvez avoir cette méthode sur ce service (sinon, l’avoir sur un composant ne pose aucun problème)

  // Choose the target element (see the HTML code bellow):
  @ViewChild('myElement') myElement: ElementRef;

  this.scrollAnimateAvailable:boolean;

animateScrollTo(target: ElementRef) {
    if (this.helperService.isBrowser()) {
      this.scrollAnimateAvailable = true;
      TimerObservable
        .create(0, 20).pipe(
        takeWhile(() => this.scrollAnimateAvailable)).subscribe((e) => {
        if (window.pageYOffset >= target.nativeElement.offsetTop) {
          window.scrollTo(0, window.pageYOffset - e);
        } else if (window.pageYOffset <= target.nativeElement.offsetTop) {
          window.scrollTo(0, window.pageYOffset + e);
        }

        if (window.pageYOffset + 30 > target.nativeElement.offsetTop && window.pageYOffset - 30 < target.nativeElement.offsetTop) {
          this.scrollAnimateAvailable = false;
        }

      });
    }

  }



 scrollToMyElement(){
   this.animateScrollTo(this.myElement)
  }

Vous devez passer l'élément à cette méthode, voici comment vous pouvez le faire:

<a (click)="scrollToMyElement()"></a>
<!-- Lots of things here... -->
<div #myElement></div>
0
M98