web-dev-qa-db-fra.com

Comment faire défiler en douceur pour ancrer la page dans angular 4 sans plugins correctement?

Ce que je veux réaliser est un clic sur et faire un défilement lisse vers le bas/zone div spécifiée que je définis avec hashtag juste comme je pense que cela devrait être comme ça.

voici l'exemple en direct de l'exemple w3school écrit pour JQuery: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

Ce que je fais est un coup d’oeil de cette réponse: Routage Angular2 avec Hashtag vers une ancre de page

mais je ne comprends pas vraiment la réponse, la réponse est la suivante:

cette partie est une partie HTML:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

et au-dessous de ceci, le router.navigate est où devrais-je mettre le code? composant.ts non? mais comment puis-je accéder à cette fonction? dois-je implémenter (cliquer)?

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

et au-dessous, je l’ai, qu’il devrait écrire dans mon composant.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

que signifie le "chemin"? Je devrais ajouter une route dans mes routes.ts non? d'habitude, j'ajoute un nouveau chemin ici par exemple comme ceci:

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'product', redirectTo: '/product' },
  ...homeRoutes,
  ...productRoutes
];

quelqu'un peut-il me fournir un exemple complet de code HTML, de routes et de composants?

angulartypescriptscrollroutes
21
Ke Vin

d'après ce que j'ai lu et ce que je cherche, ce sera un enfer de code pour juste un défilement lisse, ce n'est pas simplement comme JQuery, je pense, alors j'ai décidé d'utiliser ce plugin qui fonctionne parfaitement: https: // www.npmjs.com/package/@nicky-lenaers/ngx-scroll-to

sentez-vous libre de l'utiliser

18
Ke Vin

Je cherchais une solution similaire et j'ai essayé d'utiliser le paquet ngx-scroll-to et j'ai constaté qu'il ne fonctionnait pas dans la dernière version de angular (angular 6+) alors décidé de chercher une autre option et de trouver une solution utilisant le navigateur nativescrollIntoView, ce qui semble être la meilleure solution à ce jour

Code HTML :

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

Code Ts:

scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
47
Joel Joseph

Vous pouvez simplement le faire dans votre composant.

const element = document.querySelector("#destination")
if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })

Réf.: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

9
Haroon Yousuf

Solution CSS uniquement

html {
  scroll-behavior: smooth;
}

Cela fonctionne même après la navigation ou le rechargement de page.

Veuillez noter que cela ne fonctionne pas dans IE, Edge ou Safari.

4
Ilker Cat

Essayez de supprimer les crochets:

class="startScroll" scrollTo="'#firstDiv'" scrollBoxID="'#scrollBox'"
1
Gmak

Je viens d'utiliser ngx-page-scroll . Cela peut être aussi simple que:

<a class="nav-link nav-item-text" pageScroll href="#categories">Categorias</a>

....

<section id="categories">

Visitez la page du paquet pour plus d'informations: https://www.npmjs.com/package/ngx-page-scroll

Il fournit également des mécanismes permettant de configurer le processus de défilement ou le comportement personnalisé d'implémentation d'événement via un service contrôlant le défilement à partir du contrôleur du composant.

0
Thiago Araújo