将新的Ajax内容加载到当前div之上而不滚动 [英] Load new Ajax content above current div without scrolling

问题描述

我不确定是否允许我在这里没有代码的情况下提出问题。无论如何，如果它太宽或不适当，我会很乐意删除。我目前正在实现拉刷新，永不停止滚动的过程，这两个都是如此流行，显然是因为他们的可用性。

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...

我想要所有的新帖自动地，并只是将它们附加到我的列表的顶部，但如果你想象某些东西像twitter使用，你永远不会实际阅读tweet。他们会很快刷新你试图阅读的一切都会被埋没。

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.

推荐答案

不，我不记得有一个系统完全像你描述的网站。但我做了一个小功能，应该模仿你想要达到的效果很好。

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.

1）。定义跟踪文档顶部当前偏移量的变量，如下所示：

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）。每次用户滚动时，将当前偏移量的值更新到文档的顶部：

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）。使用您的函数获取数据，然后使用此代码预先添加到容器，然后将页面滚动到之前的前一个位置：

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));

这篇关于将新的Ajax内容加载到当前div之上而不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！