Javascript 用于手机显示大列表的自动高度虚拟列表

我有一个要求，我必须显示可能具有不同高度的大型项目列表，并且项目将动态添加到列表末尾。以前我写过我自己的虚拟列表，在桌面浏览器中表现很好，但我观察到在Safari浏览器中，当我在scroll上做很多事情时，该列表会闪烁进来。由于safari在滚动时添加了效果，因此与本机滚动效果冲突。我发现了一种在滚动时插入和删除节点的有趣方法。但这是为具有固定高度元素的列表设计的，而不是为自动高度元素设计的（即使是我已经实现的解决方案），因为在开始时，我们计算总高度，如下所示

 this.totalRows = config.totalRows || (config.items && config.items.length);

 var scroller = VirtualList.createScroller(itemHeight * this.totalRows);
 this.container = VirtualList.createContainer(width, height);
 this.container.appendChild(scroller);   

滚动时，我们发现滚动项如下

 var first = parseInt(scrollTop / itemHeight);

但是，这让我很害怕，因为对于自动高度元素，我完全不知道如何计算第一项，以及如何找到虚拟滚动条的总高度

---

以前有人在手机上实现过这种解决方案吗？除了这种方法或任何可用的插件之外，还有其他方法吗？

听起来你应该能够通过始终在每个元素上运行一个循环来进行正确的计算，以获得每个元素的实际高度。“自动高度”元素仍然具有高度。确保做一些真实的测试，有不同的方法来计算高度。我在jquery中使用outerHeight来确保它使用填充进行计算。如果您共享一些硬编码的html/js，并指出高度的具体问题，这会更容易。

请在jsfiddle.net上演示。