是下拉刷新，触底加载吧？无非这几点：

下拉刷新

1. 通过scrolltop判断滚动条位置
2. 当scrolltop为0时，监听touch并判断touch的纵向移动距离
3. 做差通过正负判断手指滑动的方向，当方向符合且移动距离符合时触发下拉加载动画和请求

触底加载

1. 通过内容区高度和可视区高度做差，判断页面是否产生滚动条
2. 监听页面的滚动事件，当滚动触底时，触发触底加载的动画和请求
3. 滚动触底(内容区高度 - scrolltop >= 可视区高度 + 自定义高度)，其中自定义高度为 完全触底前的高度，比如20即为距离最底部20px时触发事件

上拉和下拉原理是一样的

上拉刷新，下拉加载。先根据scroll事件的event来判断滚动方向，上拉判断scrollTop的值是否为0来刷新，下拉判断scrollTop的值为body的高度减去滚动元素的高度

对于 $.scrollTop() ，默认情况下假设是 $.scrollTop(100) 的位置，那么高度是 100 ，那么当发现位置在 $.scrollTop() < 100 的时候，就知道是上拉， $.scrollTop() > 200 的时候，是下拉了。是否刷新随便你。

上拉刷新，看页面最下方的div有没有出现在可视区内。

这个功能还是有点复杂的，移动端的话首先你要监听盒子的touch事件：touchstart,touchmove,touchend;touchstart时记录滑动初始值x,y坐标，然后在touchmove事件中去动态的根据当前x,y坐标判断上拉下拉，再根据你自己设定的零界点（一般是下拉到顶部，上拉到底部）的时候，调用你的刷新方法和加载方法就可以了。
web端其实也差不多，只是监听的不是touch事件，而是监听滚动条的滚动距离了，距离顶部多少触发刷新，距离底部多少触发加载