Facebook的“虚拟滚动”如何运作?

时间:2012-10-10 14:58:16

标签: css facebook layout positioning

我正在学习CSS并且决定在Facebook上理解一些东西:右边的小部分,允许在不使用框架的情况下滚动。它是如何工作的?

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

我找不到这个相对位置的定义。我正在使用Chromes“检查元素”并试图找到定义此定位的位置,因此可能由js改变。

我发现:

<div class="tickerActivityStories" ...

是内部大元素,并且:

<div class="uiScrollableAreaWrap ...

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

但我无法找到第一个相对于最后一个位置的位置。我正在浏览chrome向我展示的样式和计算样式,并且看不到任何相关的定位指令。以下类型的帮助将不胜感激:

  • 打开facebook并检查过的人对此具体问题的具体答案。
  • 关于我可能做错了什么以找到答案的指导,以及我怎样才能做得更好

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

这是我最近发现的一个回购,这可能对你有帮助

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

还有其他像“狮子酒吧”或其他东西,我不记得了