Je veux faire défiler jusqu'à un div particulier en cliquant sur un bouton dans Angular 7 , voici le code que j'utilise, mais il fonctionne dans stackblitz mais affiche une erreur lorsque j'utilise dans mon projet. "Impossible de lire la propriété 'scrollIntoView' d'undefined".
https://stackblitz.com/edit/angular-scroll-local-variable?file=src%2Fapp%2Fscroll.component.ts
essayez ce lien: https: // stackblitz. com / edit / angular-scroll-local-variable-ja96uz? file = src% 2Fapp% 2Fapp.component.html
scroll(el) {
el.scrollIntoView();
}
et dans le composant: p>
<button (click)="scroll(target)"></button> <div #target>Your target</div>
4 Réponses :
Essayez le service ViewportScroller angulaire qui fournit la méthode scrollToAnchor
scroll.html^
import { Component, Input } from '@angular/core';
import { ViewportScroller } from '@angular/common';
@Component({
selector: 'scroll',
template: `
<button (click)="scroll('target')">Click to scroll</button>
<div id="target">Your target</div>
`,
styles: [`h1 { font-family: Lato; }`, `div { margin-top: 5000px; }`]
})
export class ScrollComponent {
constructor(private vps: ViewportScroller) {
}
scroll(id) {
this.vps.scrollToAnchor(id);
}
}
scroll.ts
<button (click)="scroll('target')">Click to scroll</button>
<div id="target">Your target</div>
Exemple: https: //stackblitz.com/edit/angular-scroll-local-variable-99hwvo
J'ai essayé et maintenant il montre "Impossible de lire la propriété 'scrollIntoView' de null"
@PrashantPimpale oui, il fonctionne dans stackblitz mais affiche l'erreur mentionnée ci-dessus en question lorsque j'utilise avec html dans un fichier différent et un code ts dans différent.
L'erreur de remerciement @Chellappan ne s'affiche pas maintenant, mais elle ne fait pas défiler jusqu'à la div dont j'ai besoin. j'ai ceci dans mon html> ligne a:
@PrashantPimpale j'ai ceci dans mon html> ligne a:
@Chellappan votre solution ne fait pas défiler la page jusqu'à l'id donné div. vous pouvez vérifier ici ce que j'essaye d'accomplir. stackblitz.com/edit/ …
vous n'utilisez pas Viewportscroller
@Chellappan j'ai eu mais avec cela aussi n'a pas fourni le résultat. Aucun défilement n'était là.
Essayez d'utiliser ViewChild:
//HTML
<button (click)="scroll()"></button><div #target>Your target</div>
//ts
//Import
import { ..., ViewChild, ElementRef } from '@angular/core';
//Declare
@ViewChild('target') targetEl: ElementRef;
scroll() {
this.targetEl.nativeElement.scrollIntoView();
}
J'ai essayé et il montre "Impossible de lire la propriété 'nativeElement' d'undefined"
Scroll.html
getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY,
bottom: el.top + window.scrollY
}
}
scroll() {
var scroll_to = document.getElementById('target');
var topHight = this.getOffset(scroll_to).top;
window.scrollTo(0, topHight);
}
component.tsp>
<button (click)="scroll()">Click to scroll</button> <div id="target">Your target</div>
J'ai essayé cela mais cela ne fonctionne pas, pouvez-vous s'il vous plaît partager le fonctionnement de stackblitz?
pouvez-vous s'il vous plaît vérifier votre lien? cela ne fonctionne pas comme prévu
Le code ne fonctionne pas en raison de la condition * ngIf , lorsque vous utilisez la variable show est définie par défaut sur false , d'où la valeur div n'est pas rendu sur le composant.
Le code doit être utilisé dans un composant associé où vous voulez faire défiler pour être fait, par exemple:
si vous avez besoin dans le scroll composant alors
HTML:
scroll(el: HTMLElement) {
if(el){ // If the div is rendered on the HTML then it should be HTML element
el.scrollIntoView();
}
}
TS:
<button (click)="scroll(target)">clicking this button</button> <div style="marging-top: 100px; height: 900px;"></div> <div #target *ngIf="show" style="border: 1px solid #000; padding: 10px;margin-top: 10px;"> show get screen scrolled to this div </div>
cette réponse uniquement pour le gestionnaire d'exceptions. mais besoin d'une solution pour cela.
Vous devez avoir vérifié le stackblitz, n'est-ce pas?
Cela fonctionne bien dans StackBlitz
@PrashantPimpale oui, il fonctionne dans stackblitz mais affiche l'erreur mentionnée ci-dessus en question lorsque j'utilise avec html dans un fichier différent et un code ts dans différent.
Je suggérerais de créer un stackblitz et de publier le processus actuel pour obtenir de l'aide
@PrashantPimpale stackblitz.com/ modifier /…
Vérifiez la réponse mise à jour
@PrashantPimpale désolé, ne fonctionne pas. le lien ne s'ouvre pas.
Mise à jour de la réponse
@PrashantPimpale c'est le même que le premier lien que j'ai fourni dans la question, le problème est que j'ai du code HTML dans un fichier différent du fichier TS et que le défilement ne fonctionne pas là-bas.