Javascript 滚动到最后一个附加项会在X个附加项之后中断

我有一个可滚动的div，在其中我动态地附加了一些项目，在每个附加的项目上我滚动到最后一个项目，以保持最后一个项目始终可见，但在我添加X个项目后，滚动只是通过向下和向上滚动而中断

函数addProdotto（prodotto）{
$（“.prodotti”）。追加(
$（“”，{class:“prodotto”}）
.text（prodotto.desc）
.附加(
$（“”）.文本（prodotto.prezzo），
prodotto.promo&&
$（“”，{class:“promo”}）
.text（prodotto.promo.desc）
.append（$（“”）.text（prodotto.promo.prezzo））
)
);
$（.prodotti”）.animate（{scrollTop:$（.prodotto”）.last（）.offset（）.top}）；
}
$（'.addProducts'）。在（'click'，function（）上{
addProdotto（{desc:“测试”，前言：“2.00欧元”，促销：{desc:“促销20%”，前言：“0.20欧元”）；
})

.header{
背景色：红色；
高度：80px；
}
普罗多蒂先生{
填充：1rem；
高度：计算（100vh-160px）；
溢出：自动；
}
.底部{
高度：80px；
背景颜色：蓝色；
}

添加

我已经解决了这个问题，我在添加新项目的地方直接在

$（'.prodotti'）

上执行.animate，并改为使用

.prop（'scrollHeight'）

，因此我的解决方案如下所示：

function addProdotto(prodotto) {
  $(".prodotti").append(
    $("<div>", { class: "prodotto" })
      .text(prodotto.desc)
      .append(
        $("<span>").text(prodotto.prezzo),
        prodotto.promo &&
          $("<div>", { class: "promo" })
            .text(prodotto.promo.desc)
            .append($("<span>").text(prodotto.promo.prezzo))
      )
  )  .animate({ scrollTop: $(".prodotti").prop("scrollHeight") }, "slow");
}

函数addProdotto（prodotto）{
$（“.prodotti”）。追加(
$（“”，{class:“prodotto”}）
.text（prodotto.desc）
.附加(
$（“”）.文本（prodotto.prezzo），
prodotto.promo&&
$（“”，{class:“promo”}）
.text（prodotto.promo.desc）
.append（$（“”）.text（prodotto.promo.prezzo））
)
).animate（{scrollTop:$（“.prodotti”）.prop（“scrollHeight”）}，“slow”）；
}

@Andreas刚刚添加了带有可复制代码的小提琴。如果您等待动画结束，然后才添加下一个元素，这对我来说是有效的。如果您在动画从那一刻起仍在运行其中断时添加一个项目。@Andreas尝试添加两个项目，即使我在添加新项目之前等待大约5秒，它也会中断。对我来说，它的工作方式与我的评论中所述的一样。如果我等待动画完成，我可以添加任意数量的项目（我停在30处）@Andreas你在使用哪个浏览器？