web-dev-qa-db-fra.com

Faites défiler jusqu'à l'élément au clic dans Angular 4

Je veux pouvoir faire défiler une cible lorsqu'un bouton est enfoncé. Je pensais à quelque chose comme ça.

<button (click)="scroll(#target)">Button</button>

Et dans mon composant.ts une méthode comme.

scroll(element) {
    window.scrollTo(element.yPosition)
}

Je sais que le code ci-dessus n'est pas valide mais juste pour montrer ce que je pensais. Je viens juste de commencer à apprendre Angular 4 sans expérience préalable de Angular. J'ai cherché quelque chose comme ça mais tous les exemples sont dans AngularJs, ce qui diffère beaucoup de Angular 4

javascripthtmlangulartypescript
66
user7136957

Vous pouvez le faire comme ceci:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

puis dans votre composant:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Edit: Je vois des commentaires indiquant que cela ne fonctionne plus car l'élément est indéfini. J'ai créé un exemple de StackBlitz dans Angular 7 et il fonctionne toujours. Quelqu'un peut-il s'il vous plaît donner un exemple où cela ne fonctionne pas?

104
Frank Modica

voici comment je l’ai fait avec angular 4.

Modèle

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

ajoutez cette fonction au composant.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}
29
LH7

Il existe en fait un moyen purement javascript pour accomplir cela sans utiliser setTimeout ou requestAnimationFrame ou jQuery.

En bref, recherchez l'élément dans la vue de défilement vers laquelle vous souhaitez faire défiler et utilisez scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

Voici un plunkr .

27
Jon

Un peu tard dans cette soirée, mais j'ai écrit un plugin pour Angular 4+ qui ne fait que cela. Il couvre d'autres problèmes que vous pouvez rencontrer, tels que le rendu côté serveur. Vous pouvez également animer pour faire défiler à votre goût. Divulgation complète, je suis l'auteur.

NPM: @ nicky-lenaers/ngx-scroll-to

GitHub: @ nicky-lenaers/ngx-scroll-to

J'espère que cela vous aide!

16
Nicky

Jon a la bonne réponse et cela fonctionne dans mes angular 5 et 6 projets.

Si je voulais cliquer pour faire défiler en douceur de la barre de navigation au pied de page:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Parce que je voulais revenir à l'en-tête à partir du pied de page, j'ai créé un service dans lequel cette fonction est située et je l'ai injecté dans les composants navbar et footer, puis passé à "en-tête" ou "pied de page" si nécessaire. Rappelez-vous simplement de donner aux déclarations de composant les noms de classe utilisés:

<app-footer class="footer"></app-footer>
16
Stephen E.

Dans angular 7 fonctionne parfaitement

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

En composant

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }
12
Robert S.

dans angular, vous pouvez utiliser ViewChild et ElementRef: donnez à votre élément html un ref

<div #myDiv >

et à l'intérieur de votre composant:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

vous pouvez utiliser this.myDivRef.nativeElement pour accéder à votre élément

4
M.Amer

Une autre façon de le faire en angulaire:

Balisage:

<textarea #inputMessage></textarea>

Ajouter une propriété ViewChild ():

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Faites défiler n’importe où dans le composant à l’aide de la fonction scrollIntoView ():

this.inputMessageRef.nativeElement.scrollIntoView();
4
Schnapz

Vous pouvez faire défiler n'importe quel élément de votre vue en utilisant le bloc de code ci-dessous. Notez que la cible (elementref id) pourrait se trouver sur n’importe quelle balise HTML valide.

Sur la vue (fichier html)

<div id="target"> </div>
<button (click)="scroll()">Button</button>

sur le fichier .ts,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
1
Ifesinachi Bryan