Comment faire défiler en douceur vers l'élément au chargement de la page angular 4 ?

Question

Cela est censé être très simple, j'ai un certain élément dans le template de mon composant que je veux faire défiler en douceur après le chargement de la page s'il est passé dans l'url comme un fragment comme ceci : '../cheminDuComposant#someElement'

J'ai essayé de le faire en ajoutant un #someElement à l'élément dans le html et j'ai ensuite utilisé

@ViewChild('someElement') someElement: ElementRef

puis j'ai appelé le ngAfterViewInit() comme ceci :

ngAfterViewInit() {
  this.route.fragment.subscribe((fragment: string) => {
    if (fragment === 'someElement') {
      this.someElement.nativeElement.scrollIntoView({behavior: 'smooth', block: 'start'});
    }
  });
}

Mais rien ne se passe, cela fonctionne parfaitement si j'appelle le scrollIntoView() après un court laps de temps en utilisant setTimeOut() comme ceci :

ngAfterViewInit() {
  this.route.fragment.subscribe((fragment: string) => {
    if (fragment === 'someElement') {
      setTimeout(() => {
        this.servicesSection.nativeElement.scrollIntoView({behavior: 'smooth', block: 'start'});
      }, 1000)
    }
  });
}

Évidemment, ce n'est pas correct, mais cela m'a amené à la conclusion que mon problème réside dans le moment où l'événement scrollIntoView() est déclenché.

J'ai lu de nombreuses discussions sur de nombreux sites et je n'ai pas encore réussi à le faire fonctionner correctement, donc j'ai pensé que ce serait une bonne idée de poser une question ici.

Answer 1

Pas sûr de ce que vous demandez. Si vous demandez pourquoi vous avez besoin de setTimeout, c'est parce que vous devez déclencher votre scroll à la fin du rendu du DOM. Vous pourriez aussi simplement utiliser setTimeout(() => {...}) sans valeur du tout, ça marche aussi

Pour la fluidité du scroll, vous ne pouvez pas l'obtenir avec behavior: smooth car c'est seulement supporté par le navigateur mozilla!

Malheureusement, la réponse est que vous ne pouvez pas y arriver directement avec angular2.

J'utilise ionic et ils ont de très bonnes fonctionnalités de .scrollTo sur leur contenu.

@ViewChild(Content) content: Content;
public scrollToResults() {
 setTimeout(() => {
   let element = document.getElementById('myElement');
   //1000 est la durée du scroll, 1s:
   this.content.scrollTo(0, element.offsetTop, 1000);
 })
}

Si vous n'utilisez pas ionic, vous pouvez reproduire comment ils y arrivent https://github.com/ionic-team/ionic/blob/master/src/util/scroll-view.ts

Je ne pense pas que cela vaille la peine d'importer ionic si vous ne l'utilisez pas. Peut-être qu'importer seulement ionic-angular serait suffisant, vous n'avez pas besoin d'importer tout.