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」什麼的，我不記得