jquery滚动事件动态加载数据怎么避免页面的跳动现象？

Question

最近做一个H5聊天页面，利用jquery的scroll()方法监听了滚动事件，然后用scrollTop()获取当前页面距离能滚动的最顶部的高度，当scrollTop()小于一定距离就触发加载数据的请求。

实际情景大概是这样的，比如每一页默认显示10条数据，用户第一次进页面默认加载十条，然后用户滚动页面，当滚动到顶部的时候，请求ajax加载下一页的十条数据，然后把每条数据push到当前页面数据的数组中，但是这时页面会默认停留在加载完数据后的最顶部，而想达到的理想效果是加载数据后，页面还停留在第一页的最后一条。

我采用的处理办法是去计算新加载的数据的总高度，然后让页面滚动这个高度到加载前的位置，可是实际效果会出现很明显的跳动现象，而且还有一个严重的问题就是在手机上用户滑动屏幕较快的话，会导致在每一页的顶部多次触发加载数据的方法，这样就会一次性加载几页的数据。。想问下一般这种问题都是怎么处理的呢？（最好的效果我觉得应该就是加载数据后页面不动，滚动条一直在当前数据的位置）

其实如果能保证每次加载数据后重新滚动到加载前的位置，这样就不会触发重复请求的bug，但是在一些苹果手机上这个滚动事件会失效，导致滚动条一直停留在页面顶部而重复触发请求。。太蛋疼了。。

Answer 1

获取数据前，记录当前滚动的距离a，加载并渲染完后，让窗口滚动到a的距离（相当于位置不变，但总的文档高度增加，滚动条中的滑块会变短。）实际开发中是这么用的，没发现什么问题。