将元素附加到 div 后如何更新 scrollHeight？答案

【问题标题】：How does one update scrollHeight after appending elements to a div?将元素附加到 div 后如何更新 scrollHeight？
【发布时间】：2011-07-18 01:58:12
【问题描述】：

我有一个包含多个图像的 div，溢出隐藏，它慢慢向下滚动。我想，当滚动到底部时，克隆第一个元素并将其附加到底部，这样它将继续滚动。

到目前为止，我已经完成了所有这一切，只是它不会继续滚动，因为 scrollHeight 属性仍然是原始值。有什么方法可以更新 div 的 scrollHeight 值吗？

到目前为止我的脚本：

$(document).ready(function() {
$("#carousel").scrollTop(0);
intervalID = setInterval("scrollCarousel()",50);

carousel = document.getElementById("carousel");
});

function scrollCarousel() {


if ( $("#carousel").scrollTop() > $("#carousel:first").height() ||
        $("#carousel").scrollTop() + carousel.offsetHeight >
        carousel.scrollHeight ) {

    elem = $("#carousel").children(':first-child').clone();
    console.debug(elem);
    elem.appendTo($("#carousel"));
    carousel.scrollHeight += elem.height;
}
else {
    $("#carousel").scrollTop( $("#carousel").scrollTop() + 1 );
}
}

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

给你：

http://jsfiddle.net/Paulpro/bPrY7/

你有几个错误：

首先，您不应该在 setInterval 中放入字符串。特别是当你只是调用一个函数时。由于字符串是由 eval 解析的，所以它们非常慢。

其次，当您将元素附加到底部时，您希望从顶部移除元素，然后相应地调整滚动位置。

当您已经拥有 DOM 元素时，$("#carousel") 也比 $(carousel) 慢很多。

【讨论】：

感谢您的提示！不幸的是，当它到达scrollHeight的底部时，它开始将第一个孩子移动到最后，但由于滚动位置相同，它只是继续这样做而不滚动。
啊，我只是忘记在移动图像后将scrollTop设置为0。问题解决了！
@Zack Michener 如果你有兴趣，我在没有 jQuery 的情况下重新制作了它。原版在这里：jsfiddle.net/Paulpro/bPrY7/16 不需要jQuery的新版在这里：jsfiddle.net/Paulpro/bPrY7
setInterval 中的字符串应该主要是为了正确的原因而被避免；性能是次要的。评估字符串是不好的做法，因为解释器在到达执行点之前无法对代码进行静态分析，这消除了它的许多好处。

【解决方案2】：

只是一个想法，如果你可以将第一个孩子静态地放在轮播的末尾，你可以避免克隆，从而避免问题。

希望这会有所帮助。问候。

【讨论】：

这个想法是，每当它滚动到底部时，它会更多地粘到最后，因此它会无限滚动。