手机端实现滑动分页及优化

前端入门

首先要明确几个问题：

1. 往下滚动的时候把最上面一页移除，那等我要往上滚动的时候，上一页都已经被移除掉了，我怎么获取到上一页的内容呢？

2. 既然有dom节点的移除和添加，那么我的滚动条位置要移除页面的同时要怎么设置才能让用户看起来像是无缝连接呢？

3. 我如何判断我已经滚动到了页面的顶部或底部？

4. 在滚动到底部或顶部的时候，我们具体究竟要执行哪些操作。

现在我们一个一个解决：

• 第一个问题我们只需要用两个数组来存取被移除掉的内容就OK了。

var preRemoveArray = [];    //被移除的 当前页面之前的页面
var nextRemoveArray = [];   //被移除的 当前页面后面的页面

当我们要移除上一页的时候，只需要获得第一页的html，将它push进preRemoveArray就可以了。同时如果nextRemoveArray中有内容的话(意味着你之前已经浏览过下面的内容)，只需要执行

nextRemoveArray.pop(nextRemoveArray.length - 1);    //取得是栈底的元素，因为当前页之后的页面如果push的时候顺序是 2， 3， 4页，当回到第1页再获取下一页的时候取得是 2页的内容。也可改用队列方式。
nextRemoveArray.shift();    //删除并返回第一个元素

就可以获取到下一页的内容了。

• 关于滚动条的位置，我们分两种情况。

往下拉

我们通过document.body.scrollTop获得当前滚动条的位置，因为往下拉要移除第一页的内容，所以

document.body.scrollTop = document.body.scrollTop - 第一页的高度

往上拉

假设我们现在页面中显示的是第2、3页，此时滚动到顶部，document.body.scrollTop = 0，加载了上一页的内容，移除了第3页之后，页面中显示的是第1、2页，

我们的滚动条要设置在第2页的顶部，这样用户看起来才像是无缝连接的，所以

document.body.scrollTop = document.body.scrollTop + 第一页的高度

• 判断是否到顶部很简单

var isTop = function() {    
    return document.body.scrollTop === 0;
};

返回true时，则表示滑动到顶部了。

• 而判断是否到底部则需要获取几个值：

一个是document.body.scrollTop: 网页被卷去的高

一个是window.screen.height: 屏幕分辨率的高

一个是document.body.clientHeight： 网页可见区域高

只有当document.body.scrollTop