顶部无限滚动

Question

我一直致力于实现顶部无限滚动，但遇到了一些麻烦。我面临的问题是，当附加新项目时，滚动条不会按预期调整。理想情况下，当添加新项目时，滚动条应该稍微移动以适应它们，但这种情况并没有发生。

还有其他人遇到过类似的问题吗？关于如何解决这个问题有什么建议吗？

Answer 1

听起来您遇到了附加新项目时滚动位置无法正确更新的问题。以下是一些可以帮助您解决此问题的建议：

1. 追加新项目后滚动到顶部：追加新项目后，您可以将窗口滚动到顶部以强制滚动条调整。您可以使用

   window.scrollTo()

   来实现此目的。

   window.scrollTo(0, 0);
   

2. 使用可滚动容器：确保将新项目附加到具有固定高度和

   overflow: auto

   或

   overflow-y: scroll

   CSS属性集的容器。这将确保添加新项目时滚动条自动调整。

3. 手动调整滚动位置：计算新添加的项目的高度并相应调整滚动位置。

   const container = document.getElementById('your-container-id');
   const scrollPosition = container.scrollTop;
   const newItemsHeight = // Calculate the height of the newly added items;
   container.scrollTop = scrollPosition + newItemsHeight;
   

4. 使用库：考虑使用 React Infinite Scroller 或 Vue Infinite Scroll 等库，它们可以为您处理此类问题。

实施这些解决方案之一，看看它是否能解决您的问题！如果您需要进一步帮助，请告诉我。