Javascript 如何加载一个长列表并在视图底部停留/开始而不滚动

我们的应用程序中有一个消息视图，我们在初始渲染时加载一个消息列表，然后进行渲染，从

加载….

到

[，，，]

（伪jsx）。加载时，视图会扩展到屏幕长度的许多倍，因此我们需要滚动到底部

onLoad（）

。这很麻烦：

• 在对话的旧部分延迟加载图像将不起作用，因为我们“滚动”它们，触发加载
• 应该不需要执行

  滚动到（99999）

  ：我们希望在底部开始一个新加载的页面

---

那么，如何将容器的初始“滚动位置”设置为容器的底部？这似乎是一件非常基本的事情。

下面的设计示例旨在通过模拟您的场景向您展示一种可能的解决方案。如果我错了，请纠正我

（底部链接的反应示例）

将10个图像加载到单个

元素中。模拟网络/加载延迟（每个

divsToAdd）{
间隔时间；
document.dispatchEvent（新CustomEvent（'panelLoadComplete'））；
}
}

部分{
可见性：隐藏；
}
第span节：第一个孩子{
能见度：可见；
}
分区>分区：第一个孩子{
背景颜色：浅蓝色；
宽度：100px；
高度：100px；
}
节>分区：最后一个孩子{
背景色：深蓝色；
宽度：100px；
高度：100px；
}

加载。。。（耐心等待：这需要约5秒）

您是否尝试过使用可配置的无限滚动组件？他们中的很多人只是加载最后一个#来填充

VH-y

，以适应向上滚动半个屏幕的情况。您仍然需要

滚动到
，但加载负担将减轻。然后，在向上滚动时，一次动态加载一个屏幕的值。（顺便说一句，在我们的工作中有很多事情是令人烦恼的：-）“底部新加载的页面！”-问题与浏览器如何解析HTML有关。他们从上到下解析所有文件，并按照元素的查找顺序构建DOM和CSSOM（进行一些优化）。因此，GUI的渲染和绘制是从上到下的，同时也保留了从上到下的视图。所以无论你喜欢与否，
scrollTo（）
都将是你的朋友。@RandyCasburn我想知道是否可能以某种方式将长列表组件渲染到视图之外，并在显示之前设置“容器内部”滚动位置。动态加载以前的元素是一个很好的观点。这正是我想象中的做法。好东西。好的，您需要将部分设置为隐藏，而不是显示：无，以实际强制浏览器渲染dom节点，对吗？从而得到元素的实际高度，等等。是的，没错。
display='none'
和
visibility='hidden'
之间的区别在于：display属性在设置
display
之前不会将元素放入呈现的DOM中，而
visibility
将元素呈现到DOM中，但在设置
visibility
之前不会显示它们。