Website-Suche

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;
  }