Facebook 的“虚拟滚动”是如何工作的？答案

【问题标题】：How does Facebook's "virtual scrolling" work?Facebook 的“虚拟滚动”是如何工作的？
【发布时间】：2012-10-10 23:56:52
【问题描述】：

我正在学习 css 并决定了解 Facebook 中的一些内容：右侧的 minifeed 允许在不使用框架的情况下滚动。它是如何工作的？

我怀疑我现在可能知道答案，但我找不到确切的证据。它是一个较小的固定元素，包含一个较大的元素。然后内部较大元素相对于外部较小元素的相对位置由 js 更改以响应鼠标事件。这一切都没问题。现在的问题：

我找不到这个相对位置的定义位置。我正在使用 Chrome 的“检查元素”并试图找出定义此定位的位置，因此可能会被 js 更改。

我发现：

<div class="tickerActivityStories" ...

是内部大元素，即：

<div class="uiScrollableAreaWrap ...

是第一个较小的祖先，因此将其限制为“虚拟框架”。

但我找不到第一个相对于最后一个的位置设置在哪里。我正在浏览 chrome 显示给我的样式和计算样式，但看不到任何相关的定位指令。我们将不胜感激以下类型的帮助：

打开 facebook 并检查过的人对此具体问题的具体回答。
关于我在寻找答案时可能做错了什么以及如何做得更好的指导

【问题讨论】：

只是我的看法，我认为通过 Facebook 的意大利面条 html 来探究他们如何做某事是一个糟糕的主意。
这就像阅读他们发布的 API 文档一样痛苦。辛！
你们认为 Facebook 编写了糟糕的代码吗？或者只是它没有以友好的方式呈现给最终用户？

标签： css facebook layout positioning

【解决方案1】：

与相对定位无关。该脚本检查容器的scrollTop 位置与容器的height。当它达到某个值时，它会触发 AJAX 调用以获取更多内容。当这些东西返回时，脚本将它放在当前容器中最后一个项目下方的 DOM 中，并更新分页值，以便下一次获取将是直观的。当向 DOM 添加更多内容时，滚动条会自动调整。

【讨论】：

外星人，我想了解的是ajax调用之间发生了什么，只有滚动机制本身。

【解决方案2】：

这是我最近发现的一个repo，这可能对你有帮助

http://jamesflorentino.github.com/nanoScrollerJS/

还有其他类似“狮子棒”之类的，我不记得了

【讨论】：