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

Question

我正在学习CSS并决定理解Facebook中的某些内容：最小化的右侧，允许滚动而不使用框架。它是如何工作的？

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

我无法找到这个相对位置的定义。我使用Chromes“检查元素”，并试图找出定位这个位置的地方，因此可能由js改变。

我发现：

<div class="tickerActivityStories" ... 

是内大元件，并且：

<div class="uiScrollableAreaWrap ... 

是第一祖先即变小，并且因此将其限制在一个“虚拟帧”。

但我找不到第一个相对于最后一个位置的位置。我正在浏览chrome显示的样式和计算的样式，并且看不到任何相关的定位指令。将赞赏以下类型的帮助：

• 对某人打开Facebook并进行检查的具体问题的具体答案。
• 什么，我可能已经做错找到解答指导，我怎么会做的更好

Answer 1

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

Answer 2

这是我recenlty发现了一个回购协议，这可能会帮助你

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

也有其他类似的“lionbars”什么的，我不记得