Cuộn đến phần tử khi nhấp trong Angular 4

Tôi muốn có thể cuộn đến mục tiêu khi nhấn một nút. Tôi đã nghĩ một cái gì đó như thế này.

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

Và trong component.tsmột phương pháp của tôi như thế nào.

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

Tôi biết rằng đoạn mã trên không hợp lệ nhưng chỉ để hiển thị những gì tôi đang nghĩ. Tôi mới bắt đầu tìm hiểu Angular 4 mà chưa có kinh nghiệm về Angular. Tôi đã tìm kiếm xung quanh một cái gì đó như thế này nhưng tất cả các ví dụ đều có trong AngularJs, khác với Angular 4

Bạn có thể làm như thế này:

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

và sau đó trong thành phần của bạn:

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

Chỉnh sửa: Tôi thấy các bình luận nói rằng điều này không còn hoạt động do phần tử không được xác định. Tôi đã tạo một ví dụ về StackBlitz trong Angular 7 và nó vẫn hoạt động. Ai đó có thể vui lòng cung cấp một ví dụ nơi nó không hoạt động không?

Thực tế có một cách javascript thuần túy để thực hiện điều này mà không cần sử dụng setTimeouthoặc requestAnimationFramehoặc jQuery.

Tóm lại, hãy tìm phần tử trong scrollView mà bạn muốn cuộn đến và sử dụng scrollIntoView.

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

Đây là một plunkr .

Đây là cách tôi đã làm điều đó bằng cách sử dụng Angular 4.

Bản mẫu

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

thêm chức năng này vào Thành phần.

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

Trong Angular 7 hoạt động hoàn hảo

HTML

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

Trong thành phần

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

Jon có câu trả lời đúng và điều này hoạt động trong các dự án góc 5 và 6 của tôi.

Nếu tôi muốn nhấp để cuộn trơn tru từ thanh điều hướng đến chân trang:

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

Vì tôi muốn cuộn trở lại đầu trang từ chân trang, tôi đã tạo một dịch vụ có chức năng này nằm trong đó và đưa nó vào các thành phần thanh điều hướng và chân trang và chuyển vào 'đầu trang' hoặc 'chân trang' nếu cần. chỉ cần nhớ thực sự cung cấp cho các khai báo thành phần tên lớp được sử dụng:

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

Một cách khác để làm điều đó trong Angular:

Đánh dấu:

<textarea #inputMessage></textarea>

Thêm thuộc ViewChild()tính:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Cuộn đến bất cứ nơi nào bạn muốn bên trong thành phần bằng cách sử dụng scrollIntoView()hàm:

this.inputMessageRef.nativeElement.scrollIntoView();

Bạn có thể cuộn đến bất kỳ tham chiếu phần tử nào trên chế độ xem của mình bằng cách sử dụng khối mã bên dưới. Lưu ý rằng đích (id phần tửref ) có thể nằm trên bất kỳ thẻ html hợp lệ nào.

Trên chế độ xem (tệp html)

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

  

trên .tshồ sơ,

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

Bạn có thể đạt được điều đó bằng cách sử dụng tham chiếu đến phần tử DOM góc cạnh như sau:

Đây là ví dụ trong stackblitz

mẫu thành phần:

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

Trong Angular, bạn có thể sử dụng ViewChildvà ElementRef: cung cấp cho phần tử HTML của bạn một tham chiếu

<div #myDiv > 

và bên trong thành phần của bạn:

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

bạn có thể sử dụng this.myDivRef.nativeElementđể đến phần tử của mình

Tôi đã làm điều gì đó giống như những gì bạn yêu cầu chỉ bằng cách sử dụng jQuery để tìm phần tử (chẳng hạn như document.getElementById(...)) và sử dụng lệnh .focus()gọi.

Bạn có thể làm điều này bằng cách sử dụng jquery:

mã ts:

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

Mã HTML :

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

Áp dụng điều này trên các phần tử bạn muốn cuộn:

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

Đây là một mẫu stackblitz.