javascript - Zur Klasse in Angular 5 scrollen
Sehr einfache Frage, wie kann ich in Angular zu einer Klasse scrollen, habe stundenlang gesucht, um das zum Laufen zu bringen, so frustrierend
Ich habe eine Kalenderkomponente, und wenn ich auf einen Tag klicke, öffnen sich die Ereignisse für diesen Tag darunter
Funktioniert mit reinem JavaScript für eine ID, aber nicht für eine Klasse
const elmnt = document.getElementById('scrollto');
elmnt.scrollIntoView(true);
Ich habe auch jQuery zur Verfügung, aber dies scrollt überhaupt nicht.
if ($('.call-open').length > 0) {
$('html, body').animate({
scrollTop: $('.call-open').offset().top
}, 2000);
}
Diese .call-open Klasse wird hinzugefügt, nachdem ich auf den Tag klicke, vielleicht ist das der Grund
Ich habe dieses Plugin ausprobiert, aber es macht nichts, selbst mit einem einfachen Beispielknopf.
Ich kann nicht der Einzige mit diesem Problem sein, aber ich kann keine funktionierende Lösung finden, manchmal ist Angular bei einfachen Dingen wie diesem ein Schmerz im Hintern
Antwort #1
versuche dies mit Zeitlimit
scroll(){
setTimeout(() => {
const classElement = document.getElementsByClassName('scrollTo');
if(classElement.length > 0){
classElement[0].scrollIntoView();
}
}
}, 100);
}
Antwort #2
Ich habe dieses Problem mit folgendem Code gelöst:
constructor(private el: ElementRef) { }
scrollToFirstInvalidControl() {
const firstInvalidControl: HTMLElement = this.el.nativeElement.querySelector(
"class-name"
);
if (!firstInvalidControl) return false
window.scroll({
top: this.getTopOffset(firstInvalidControl),
left: 0,
behavior: "smooth"
});
}
getTopOffset(controlEl: HTMLElement): number {
const labelOffset = 50;
return controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;
}
