# 5.8 scroll 事件

## 範例一：window scroll

瀏覽器監聽 **`scroll`** 事件，可以透過 **`window.scrollX`** 及 **`window.scrollY`** 取得滑動的距離。例：

```javascript
window.addEventListener("scroll", function(e){
  console.log("scrollX: " + window.scrollX);
  console.log("scrollY: " + window.scrollY);
});
```

{% embed url="<https://codepen.io/carlos411/pen/KKzQypB>" %}

## 範例二：元素 scroll

{% embed url="<https://codepen.io/carlos411/pen/MWyQObL>" %}

## 範例三：認識 getBoundingClientRect()

MDN：<https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect>

{% embed url="<https://codepen.io/carlos411/pen/gOjXYqG>" %}