Scrollen Sie beim Klicken in Winkel 4 zum Element

Ich möchte in der Lage sein, zu einem Ziel zu scrollen, wenn eine Taste gedrückt wird. Ich habe so etwas gedacht.

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

Und in meiner component.tseine Methode wie.

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

Ich weiß, dass der obige Code nicht gültig ist, sondern nur um zu zeigen, was ich gedacht habe. Ich habe gerade angefangen, Angular 4 ohne vorherige Erfahrung mit Angular zu lernen. Ich habe nach so etwas gesucht, aber alle Beispiele befinden sich in AngularJs, was sich stark von Angular 4 unterscheidet

Sie könnten es so machen:

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

und dann in Ihrer Komponente:

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

Bearbeiten: Ich sehe Kommentare, die besagen, dass dies nicht mehr funktioniert, da das Element undefiniert ist. Ich habe ein StackBlitz-Beispiel in Angular 7 erstellt und es funktioniert immer noch. Kann jemand bitte ein Beispiel geben, wo es nicht funktioniert?

Es gibt tatsächlich eine reine Javascript-Methode, um dies ohne Verwendung von setTimeoutoder requestAnimationFrameoder jQuery zu erreichen.

Kurz gesagt, suchen Sie das Element in der scrollView, zu dem Sie scrollen möchten, und verwenden Sie es scrollIntoView.

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

Hier ist ein Plunkr .

Hier ist, wie ich es mit Angular 4 gemacht habe.

Vorlage

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

Fügen Sie diese Funktion der Komponente hinzu.

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

In Angular 7 funktioniert perfekt

HTML

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

In Komponente

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

Jon hat die richtige Antwort und das funktioniert in meinen eckigen 5 und 6 Projekten.

Wenn ich klicken wollte, um reibungslos von der Navigationsleiste zur Fußzeile zu scrollen:

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

Da ich von der Fußzeile zurück zur Kopfzeile scrollen wollte, habe ich einen Dienst erstellt, in dem sich diese Funktion befindet, und ihn in die Komponenten der Navigationsleiste und der Fußzeile eingefügt und bei Bedarf in der Kopf- oder Fußzeile übergeben. Denken Sie daran, den Komponentendeklarationen tatsächlich die verwendeten Klassennamen zu geben:

<app-footer class="footer"></app-footer>

Eine andere Möglichkeit, dies in Angular zu tun:

Markup:

<textarea #inputMessage></textarea>

ViewChild()Eigenschaft hinzufügen :

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Scrollen Sie mit der scrollIntoView()Funktion an eine beliebige Stelle innerhalb der Komponente :

this.inputMessageRef.nativeElement.scrollIntoView();

Sie können zu einem beliebigen Element in Ihrer Ansicht scrollen, indem Sie den folgenden Codeblock verwenden. Beachten Sie, dass sich das Ziel (elementref id ) auf einem beliebigen gültigen HTML-Tag befinden kann.

In der Ansicht (HTML-Datei)

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

  

auf der .tsDatei,

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

Sie können dies erreichen, indem Sie den Verweis auf ein eckiges DOM-Element wie folgt verwenden:

Hier ist das Beispiel in Stackblitz

die Komponentenvorlage:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

In Angular können Sie verwenden ViewChildund ElementRef: Ihrem HTML-Element eine Referenz geben

<div #myDiv > 

und in Ihrer Komponente:

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

Sie können verwenden this.myDivRef.nativeElement, um zu Ihrem Element zu gelangen

Ich habe so etwas wie das, was Sie fragen, getan, indem ich jQuery verwendet habe, um das Element (z. B. document.getElementById(...)) zu finden, und den .focus()Aufruf verwendet habe.

Sie können dies mit jquery tun:

ts Code:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

HTML Quelltext :

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

Wenden Sie dies auf Elemente an, die Sie scrollen möchten:

<div id="elementTo">some content</div>

Hier ist ein Stackblitz-Beispiel.