VUE单页面应用，如何判断组件内块级元素中内容滚动到底

第一次写自己的原创技术博客，欢迎大家批评指正。

最近在用VUE框架做一个移动端的单页面应用，项目中碰到了一个关于滚动加载的问题，由于某些原因，用已有的滚动加载的框架实现不了UI小GG设计出来的效果，无奈之下只能自己去摸索。

在网上面看了很久，发现滚动加载的关键就是如何去判断用户已经下拉到内容的最底部。在网上搜索资料，发现很多方法都是基于页面本身，但笔者的项目中，这个滚动加载是放在组件中的一个<div></div>中，所以网上的大部分资料都不适用。最后找到了这个。这里是链接地址，里面的一张作者的手绘图给了我很大的启发。

在VUE中，v-on是进行事件绑定的，在这里面有一个scroll事件。首先，我们要做的就是把这个事件绑定到目标块级元素上面去。具体代码：<div @scroll="yourmethod"></div>。

这个方法会默认传入一个event参数。笔者在方法中使用了console.log(e);打印了一下这个事件对象。

然后控制台的显示如下面这几张图：

如图所示，我们在能在这个事件里面的target属性中轻松的拿到scrollTop，offsetHeight和scrollHeight（笔者的理解就是块级元素中内容撑开的高度）。当然这里有一个前提，就是你要展示的内容必须是要大于块级元素预设的高度，然后这样设置overflow:auto。

至此，我们可以得到一个公式，scrollHeight = scrollTop + offsetHeight。后面这个offsetHeight具体说应该是可视高度，视具体情况而定，由于笔者的项目中这个块级元素的高度，直接设置成了设备的高度，即：height：100vh;如果是在自己的项目中，这个高度应该是块级元素的高度。不过这个vh这个单位好像 还是可能引发一些兼容性的问题，建议慎重使用。

后面的加载过程就相对简单了，只要当scrollTop + offsetHeight>=scrollHeignt时，我们去向后台申请数据就好了。这不是这篇博客的重点，要是有兴趣的可以在下面留言，我们一起交流，一起进步。