[問題] 用Angular的方法達成按下某個按鈕之後 視窗滾動到新增的元素頂端

大家好,小弟我又上來求救了XDDD

我有某個按鈕是按下之後會新增陣列裡的資料,
在Templete裡會按照這個陣列裡的資料新增區塊。

這次的需求是,
我必須在新增完之後,
讓視窗滾動的該區塊的頂端。

孤狗了一下都沒有比較好的解法,
所以只好上來求助各位大神。

還請各位大神指點一下迷津,感激不盡!!

可以利用這個功能,

API: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

3個讚

Kevin大大,抱歉,我最近超級忙,才終於有空好好看你的sample code…

我研究了一下,感覺好像還是不是我想要的東西,
應該是我沒有弄sample code的關係,抱歉。

使用情境是這樣子的:
我在A Component底下會有一個div是會根據陣列裡的資料去產生的,
一旦我丟了一筆資料進去這個陣列,
就會增加那一整塊div,
所以我想要在增加之後,
做到像您做的範例一樣,
可以讓視窗滾到那塊新增的區域,
不曉得在Angular裡有什麼方式可以達成這個目的呢?

Sample code如下,還請您不吝指教,萬分感謝!!

一定的原理,只要能取得新產生的區塊 element 即可

2個讚

哦哦哦哦哦!!

又學到一個新東西了!!「QueryList」!!

Kevin大大您寫了兩個solution,

還想請問一下優缺?

有使用哪一種solution比較好嗎~~?

solution 1 是使用 Angular 內建的方法完成的,是透過 Observable 的方式處理,我個人是比較喜歡這種,理由是

  1. RxJS
  2. 如果你重複的是另外一個 component 時,那 ViewChildren 可以直接取得該 component 的實體之類的
  3. QueryList 提供很多方法可以玩

solution 2 是使用原生地 javascript document api 完成的,這種作法如果在其他的案子有一樣的需求時,可以參考這種作法

沒有什麼優缺點

3個讚

了解~ 謝謝Kevin大的耐心講解~~感激不盡~