前言
在app端常常看到类似加载数据的动画，接下来我们来实现滚动触底加载动画提示，以及如何复用这些逻辑。
如何判断滚动触底
来看下几张图：
情况一：
当文档高度还为超过可视区域高度时，不存在滚动，所以也没有滚动触底
情况二：
当文档高度超过可视区域的高度时，还有剩余的文档没有滚动完，也就是说
可视区域高度 + 滚动高度 < 文档高度 ，此时没有达到滚动触底的条件
情况三：
文档高度大于可视区域，并且滚动到文档底部, 也就是说
可视区域高度 + 滚动高度 = 文档高度
判断是否滚动到底
经过上面三种情况的分析，我们需要拿到
可视区域的高度 ,
滚动高度 ,
文档高度 这三个变量来进行比较。可视区域的高度
function getWindowHeight() {
return document.documentElement.clientHeight;
}滚动高度
对有doctype申明的页面使用document.documentElement.scrollTop，safari特例独行：使用 window.pageYOffset
function getScrollHeight() {
return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}文档高度
function getDocumentTop() {
return document.documentElement.offsetHeight;
}代码实现
触底打印
codepen 触底打印demo
通过监听滚动事件来判断
可视区域 ，
滚动高度 ，
文档高度 的关系,实现最基础的触底加载
<div id="app">
<ul>
<li v-for="item in list" :key="item" > {{item}}</li>
</ul>
