张念磊的博客

Vue - 滚动条滚动到最下方时更新

2020-04-18

代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
watchScroll() {
this.$nextTick(() => {
const el = this.$refs["discussInfoBox"];
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if (offsetHeight + scrollTop - scrollHeight >= -1) {
// 需要执行的代码
console.log("get info ");
}
};
});
},

使用步骤

  1. 第三行中的discussInfoBox为要监听的div的ID
  2. 在第十行编写当滚动条滚动到最下方时需要调用的函数
  3. 在需要的地方调用该函数。例如created方法或其他监听事件中

原理解释

Tags: Vue

扫描二维码,分享此文章