jQuery prepend - 防止自动滚动

Posted 2023-04-13

【中文标题】jQuery prepend - 防止自动滚动

【英文标题】：jQuery prepend - prevent auto scroll

【发布时间】：2012-10-17 18:12:33

【问题描述】：

我只是在使用 jQuery prepend 并不能让它按预期工作。

我在做什么：

每隔一秒将一个.content div 添加到#main div

但是，当我向下滚动一点 [一旦页面充满了内容]，我会不断滚动回到 #main 的顶部或最新的前置 .content

我该怎么做：

防止viewport 更改 - 就像在追加的情况下一样

相关fiddle

【问题讨论】：

视图没有改变；页面变得更长，因此从顶部的滚动距离是静态的，而整个页面长度变得动态更大（因此底部元素超出视口）。如果您一直滚动到页面底部，是否正在尝试使最后一个元素保持在视图中而不是“脱落”？

@BradChristie 我基本上想要“什么是可见的”[滚动条除外，它显然应该改变]不管前置如何都不会改变。

【参考方案1】：

正如我在评论中解释的那样，滚动实际上并没有改变。窗口的滚动基于“与顶部的距离”（DfT）。也就是说，如果您没有滚动条，那么您的 DfT 为 0。一旦引入滚动条，您现在就有了可以使用的距离。

因为内容越来越长，所以视口只有这么多像素高，一些内容“从”页面底部“掉下来”（前置是使 DfT 偏离新元素的高度）。

我能想到的最好方法是用新元素的高度来对抗它。这允许您滚动到一个位置，然后随着新元素的添加，您可以相应地修改滚动位置。

这是我的意思的一个例子：http://jsfiddle.net/bradchristie/66RvC/1/

以及代码（供参考）：

var f = function()
    var t = $(window).scrollTop(),      // Window's current scroll position
        $d = $(d()).prependTo('#main'), // store the new element
        h = $d.outerHeight();           // also get its height
    if (t)                             // Only adjust if they've scrolled
        $(window).scrollTop(t + h);     // add the delta to the scroll position
    
    setTimeout( f, 1000 );
;

【讨论】：

而且，append 与 DfT 无关，我没有任何问题。对吗？

@goldenparrot：并不是说它没有相关性，只是 append 不会向下移动很多元素。但是，如果您在一个页面上有两个列表，并且您一直将元素附加到顶部列表中，那么第二个列表的元素会发生变化，您也会遇到同样的问题。

@goldenparrot：我的意思是here 的一个例子（使用追加而不是前置）。请注意，它后面的内容现在很重要。

谢谢。我想我现在明白了要点。

这正是我想要的。感谢您提供有关“DfT”的解决方案和解释。 :D