要实现的效果是内容盒子的内容滑动到最底部的时候,加载新的内容。
判断上述情况需要有三个值:
1、内容盒子的高度
2、盒子里内容的总高度
3、滚动条的scrollTop
获取到三个值以后,只需要判断内容盒子的高度+滚动条的scrollTop = 盒子内容的高度即为触底。
当然市面上已经也有不少封装好的scroll滚动插件(像iScroll、better-scrol),可以拿来即用,触底方法也不需要自己写了,我这里总结了一下自己实现的大概思路。
我这里用的是自定义盒子,将盒子样式设置为overflow-y:auto,通过里面的scroll方法来监听判断滚动的距离是否触底:
getScroll(e) {
//我这里用了节流 控制频率
//这里的timeout需要提前在外面声明
if (!timeout) {
let self = this;
timeout = setTimeout(function () {
/**
* height1 里面内容总高度
* height2 外面容器的高度
* scrollTop 滚动距离顶部的高度
* 外面容器的高度 + 滚动条的scrollTop = 盒子内容的高度即为触底
*/
let height1 = document.getElementsByClassName("data-container")[0].clientHeight;
let height2 = document.getElementsByClassName("scroll_container")[0].clientHeight;
let scrollTop = e.target.scrollTop;
// 距离底部100px时开始加载
if (height2 + scrollTop > height1 - 100) {
console.log("触底了");
// 加载函数
// self.loadmore();
}
timeout = null;
}, 100);
}
},
如果不是自定义盒子,而是直接在页面滚动,则需要监听页面的scroll方法,如下:
在handleScroll方法中通过document.documentElement.scrollTop获取滚动距离,之后的实现思路同上
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
}