---
# System prepended metadata

title: 【Angular】Swiper scrollTop = 0 沒作用
tags: [開發日誌]

---

---
tags: 開發日誌
---

# 【Angular】Swiper scrollTop = 0 沒作用


試圖在 Swiper 觸發 slideChange 讓新的 slide 可以自動滾動到該 component 頂部，使用 window.scrollTo(0, 0) 和 scrollTop = 0 沒有作用。


## 解決方式
```javascript=
const targetElement = this.el.nativeElement; // 抓取目標el
targetElement.scrollTop = 0;

// 可以再增加平滑屬性，讓視覺上的滾動比較自然
// targetElement.scrollTo({top:0,behavior: "smooth"})

```
這邊要注意一下，如果要取得 scrollTop 的值，要抓的是滾動層的的父層，而要滾動的容器外面 均設為不能滾動。



## 其他方式
[Element.scrollIntoView()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView)
[那些被忽略但很好用的 Web API / ScrollIntoView](https://ithelp.ithome.com.tw/articles/10279669?sc=iThelpR)
```javascript=
const targetElement = this.scroll.nativeElement;
targetElement.scrollIntoView({ behavior: "smooth" });
```
不過經過測試，在 ChromeWeb、Android 中，如果 slideChange 時去呼叫沒有作用。


## 參考相關資料
* [How to handle window scroll event in Angular 4?](https://stackoverflow.com/questions/44516017/how-to-handle-window-scroll-event-in-angular-4/44516191)
* [Angular4 - Scrolling to anchor](https://stackoverflow.com/questions/44441089/angular4-scrolling-to-anchor)
* [Angular 5 Scroll to top on every Route click](https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click/48048822)
* [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)

