Load new Ajax content above current div without scrolling

Question

I'm not sure that I am allowed to post questions without code here. In any case, if it is too wide or does not fit, I will gladly remove it. I am currently implementing a pull implementation to update and never end scrolling, both of which are so popular now, obviously because of their usability.

There are some opponents of these functions. I just read an article on how pulling back to updating should be obsolete from the point of view of the designer in a couple of years, because everything will just be automatically updated, and who wants to manually update the material. Also, an endless scroll, you can lose your place or not download new content and update it ...

I would like all new messages to come automatically and just add them to the top of my list, but if you submit something like Twitter using this, you can never read the tweets. They would update everything that you tried to read so quickly, would be buried.

Has anyone really been far away, even when decided to use, even go want to look bigger? Sorry, I mean, did anyone see how this is implemented when new content / posts are automatically loaded on top of the most recent post, but my page position remains the same? I would like to see how this is done. Thanks.

Answer 1

No, I can’t remember the site on which there is such a system as you describe. But I made a small function that should mimic what you want to achieve pretty well.

There is a demo here where you can see the code live.

How the code works

1). Define a variable that tracks the current offset at the top of the document, for example:

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

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

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

3). Use your function to retrieve the data, and then use this code to add to the container, and then scroll down to where it used to be:

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