---
# System prepended metadata

title: scroll 滾動加載

---

# scroll 滾動加載

### js
```javascript=
import _ from "lodash";
```
```javascript=
mounted() {
    this.$refs.mainDiv.addEventListener(
      "scroll",
      _.debounce(this.scrollFun, 300, {
        trailing: true
      })
    );
}
```

```javascript=
methods:{
    changePage() {
        //do something
    },
    scrollFun(e) {
      const offset = 20;
      const scrollMax = e.target.scrollHeight - e.target.clientHeight; // 滾到底的數字最大值
      const scrollCurrent = e.target.scrollTop; // 現在滾到哪裡
      scrollCurrent > scrollMax - offset && this.changePage();
    }
}
```
```html=
<div class="main-content" ref="mainDiv"></div>
```

### css
```css=
.main-content {
  overflow-y: scroll;
}
```