Angular 筆記 - 下拉 scroll 事件用法

在許多頁面，不管是註冊或是購買東西時，都會有落落長的授權頁，相信大部分的人都不會認真看，而有些機制就是要全部看完才能進行下一步，而這次紀錄如何知道 scroll 的觸發事件。

文字區塊

<div class="modal-dialog modal-dialog-scrollable privacy-box-2">
  <div class="modal-content">
    <div class="modal-body">
      <textarea cols="40" rows="20">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque alias obcaecati eligendi magni debitis ducimus
        numquam. Omnis quia eveniet nisi praesentium asperiores dolore magni. Fugit aspernatur ipsa nulla! Rem hic, quo,
        repellat quidem eligendi, maiores molestiae laudantium asperiores magnam architecto quaerat maxime nisi eaque
        sint aliquid commodi excepturi neque voluptas. Harum ratione id iure atque voluptate natus, unde quisquam quod
        veritatis nisi maxime tempora dolore qui laudantium itaque quam velit fugiat obcaecati ex eius, debitis
        molestiae ea nemo? Repellat ratione exercitationem voluptate optio commodi voluptatem, corporis dolores, unde
        quibusdam mollitia incidunt voluptatibus quis tempora. Quas ab vero molestias itaque repellat earum pariatur
        ratione, aliquam natus qui obcaecati, praesentium ex cupiditate tempore ducimus harum voluptatem provident
        exercitationem consectetur asperiores architecto facilis officiis non. Quo architecto saepe ipsa id amet quaerat
        nam sunt dolorum, consectetur magnam commodi aperiam suscipit tempora labore libero, maiores a in quod iste?
        Magni laudantium officia amet aspernatur, cupiditate ea cumque sed ipsa dolor iste qui ratione. Nemo quod,
        officiis rerum quos facilis quae et consequuntur expedita vel quo atque ut repellat nihil ab voluptate quaerat
        excepturi dolorem dolor aperiam deserunt? Doloremque corporis accusantium exercitationem sapiente consequatur
        maiores minima nostrum fugit, consectetur illum. Amet laboriosam molestias soluta fugiat.</textarea
      >
    </div>
  </div>
</div>

獲取事件

HostListener 裝飾器

以前在寫 jQuery 的時候可以綁定 DOM，Angular 可以透過 @HostListener 的裝飾器來實作用於宣告要監聽的 DOM 事件，並提供在該事件發生時要執行的處理器方法。

scroll.ts

寫於建構式上方，使用這個裝飾器去監聽 scroll 這個事件，其事件名稱為 onElementScroll($event)

1
2
3

@HostListener('scroll', ['$event']) onElementScroll($event: any) {
    console.log($event); //有監聽到事件
    }

在 HTML 中加上 OnElementScroll 事件。

scroll.html

1
2
3

<div class="modal-body scrollModal" (scroll)="onElementScroll($event)">
  <p>...</p>
</div>

然後來看一下監聽到了什麼東西，在開發人員工具可以看到監聽結果。

我試著去看一下裡面的內容，感覺 srcElement 跟 target 比較像是我要取得的 DOM 元素的屬性，來試著取看看。

ElementRef 取得 DOM

Angular 使用 ElementRef 包裝器來檢視某個原生元素，要在建構式中使用這個方法。

scroll.ts

constructor(
    private formBuilder: FormBuilder,
    private el: ElementRef
 ) {

 }

然後來抓抓看，

@HostListener('scroll', ['$event']) onElementScroll($event: any) {
    console.log($event); //有監聽到事件
      let modal= this.el.nativeElement;
    console.log(modal);
    }

看一下開發人員工具顯示，似乎是抓到了整個網頁…

因為我只要抓到 textarea 的地方，所以我在這邊加上一個 .scrollModal 來抓取。

scroll.html

1
2
3

<div class="modal-body scrollModal">
  <textarea>...</textarea>
</div>

scroll.ts

querySelector 抓取我要的 DOM 元素。

Angular 是 JS 框架，所以原生寫法有些還是很好用的。

@HostListener('scroll', ['$event']) onElementScroll($event: any) {
    console.log($event); //有監聽到事件
      let modal= this.el.nativeElement.querySelector('.scrollModal');;
    console.log(modal);
    }

這時候會發現我取得我指定的區塊了！

DEMO https://stackblitz.com/edit/angular-ivy-scgz2d?embed=1&file=src/app/app.component.html

提姆寫程式