记录滚动位置

h5页面记录滚动位置的步骤思想

第一种情况：页面不分页时候,只是记录滚动位置，记录个滚动缓存就可以了，跳转到滚动位置就可以了。（百度上很多，就不说了。）

第二种情况：页面分页时候，记录滚动位置

这种情况很坑，以下是处理这样的情况的步骤（举例：电商商品首页记录位置）

总要思想步骤：

1.先记录滚动位置和当前商品数据到缓存。

ps:因为跳转时候如果不先渲染出你的页面，这时候你滚动位置如果大于你的某个值，会跳到当前最大位置，就是没有进行分页的最大位置。

2.分页算法里面记录你的当前页和总页数，当页面刷新好后，当前页和总页数进行判断，是否该分页，以防已经到底还能下拉分页

3.页面刷新后，先根据你的缓存数据渲染页面，然后再进行跳转，这样滚动跳转位置就是正确的，页面页面高度已经发生了变化

4.缓存渲染完页面后，你需要再次获取和缓存数据一样的最新的数据，然后再次渲染页面，最后重置缓存为最新的数据，以防数据变化后，页面还是一直未缓存的页面

 

需要注意的地方：

1.取消默认浏览器记录位置的自动滚动

history.scrollRestoration = 'manual';

2.封装你的分页算法，并且在算法里面记录当前页，页码总数

3.监听滚动时候，记录你的滚动位置

4.监听滚动时候，判断当前页面是否大于页码总数，这里需要处理好你所存的分页总数和当前页，需要做处理，否则你的分页和总页数刷新时候&