Tìm kiếm trang web

javascript - Cuộn đến phần tử khi nhấp vào trong Angular 4

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

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

Và trong component.ts của tôi có một phương thức giống như.

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ỉ để minh họa những gì tôi đang nghĩ. Tôi vừa bắt đầu học Angular 4 mà không có kinh nghiệm trước về Angular. Tôi đã tìm kiếm xung quanh một thứ gì đó giống như thế này nhưng tất cả các ví dụ đều ở AngularJs, điều này khác rất nhiều so với Angular 4

Câu trả lời #1

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

<button (click)="scroll(target)">Scroll To Div</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 vì phần tử không được xác định. Tôi đã tạo một ví dụ StackBlitz trong Angular 7 và nó vẫn hoạt động. Có ai đó có thể cung cấp một ví dụ mà nó không hoạt động không?

Câu trả lời #2

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

Câu trả lời số 3

Đây là cách tôi thực hiện điều đó bằng Angular 4.

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

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

Câu trả lời #4

Thực ra có một cách chỉ sử dụng JavaScript thuần để thực hiện điều này mà không cần dùng setTimeout hoặc requestAnimationFrame hay jQuery.

Tóm lại, 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 cái plunkr.

Câu trả lời số 5

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

Đánh dấu :

<textarea #inputMessage></textarea>

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

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Cuộn đến bất kỳ vị trí nào bạn muốn bên trong thành phần bằng cách sử dụng hàm scrollIntoView():

this.inputMessageRef.nativeElement.scrollIntoView();

Câu trả lời số 6

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

Nếu tôi muốn nhấp để cuộn mượt từ thanh điều hướng xuống 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 phần tiêu đề từ phần chân trang, tôi đã tạo một dịch vụ mà chức năng này nằm trong đó và tiêm nó vào các thành phần navbar và footer, đồng thời truyền 'header' hoặc 'footer' khi cần. chỉ cần nhớ thực sự cung cấp cho các khai báo thành phần các tên lớp đã sử dụng:

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

Câu trả lời số 7

Bạn có thể cuộn đến bất kỳ phần tử ref nào trên view của bạn bằng cách sử dụng khối mã dưới đây. Lưu ý rằng phần tử mục tiêu (elementref id) 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 tệp .ts,

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

Câu trả lời số 8

Trong Angular bạn có thể sử dụng ViewChild và ElementRef: đặt một tham chiếu (ref) cho phần tử HTML của bạn

<div #myDiv></div>

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 để truy cập vào phần tử của bạn

Bài viết liên quan