在不滚动的情况下将新的Ajax内容加载到当前div之上

Question

I'm not sure if I'm allowed to post questions without code here. Anyway, if it's too broad or not appropriate I'll gladly delete. I'm currently in the process of implementing pull to refresh, and never ending scroll, both of which are so popular now obviously because of their usability.

There are also some opponents of these features. I just read an article about how pull-to-refresh should be obsolete from a designer's perspective in a couple years because everything will just automatically refresh, and who wants to have to manually refresh stuff. Also the never ending scroll you can lose your place or fail to load new content and have to refresh...

I'd love to have all the new posts come in automatically, and just append them to the top of my list, but if you imagine something like twitter using that, you'd never actually get to read a tweet. They'd refresh so quickly everything you tried to read would be buried.

Has anyone really been far even as decided to use even go want to do look more like? Sorry, what I mean is, has anyone seen it implemented where new content/posts are automatically loaded above the most recent post but my spot on the page stays the same? I'd like to see how it's done. Thank you.

Answer 1

No, I can't remember a site where there's a system exactly like you describe. But I made a small function that should mimic what you want to achieve pretty well.

Here's a demo where you can see the code live.

How the code works

1). Define the variable that keeps track of the current offset to the top of the document, like this:

var curr_y = $(window).scrollTop();

2). Update the value of the current offset to the top of the document every time the user scrolls:

$(window).scroll(function () {
    curr_y = $(window).scrollTop();
});

3). Use your function to fetch data, and then use this code to prepend to the container and then scroll the page to the place where it used to be before the prepend:

cont = $('<div>your-content');
$("#container").prepend(cont);
$(window).scrollTop(curr_y + cont.outerHeight(true));