如何呈現List/Grid行，就好像它是粘性的？

我有一個組件使用react-virtualized的List進行虛擬化滾動，其中每行都是一個類別標題，或者屬於該類別的實際內容。因此，像：如何呈現List/Grid行，就好像它是粘性的？

Fruits 
- Strawberry 
- Blueberry 
- Mango 
- ...etc 
Grains 
- Oats 
- Wheat 
- Rice 
- ...etc

（其中Fruits和Grains是類別標題）

當用戶滾動，如果他們滾過一個類別標題，我希望能夠從該行取數據和將其呈現爲「粘性」（在引號中，因爲position: sticky並非真正可行的選項），它粘到滾動容器的頂部，直到它們滾過下一個類別標題，等等。（基本上，滾動瀏覽藝術家在iOS音樂應用程序中工作的方式相同）。

棘手的是，我希望這個粘性標題仍然位於滾動容器中，而不是覆蓋它或坐在它上面，並且它需要填充其父容器的寬度，這就排除了在List組件之外呈現粘性容器，並且僅將其覆蓋在position: absolute的頂部。

據我所知，目前看起來像這樣做並不是真的可以用react-virtualized--因爲所有的行都是絕對定位的，所以沒有辦法在滾動條中創建一個「粘性」行容器。絕對定位粘性標題是可行的，但前提是所有其他行都靜態放置在普通文檔流中。

現在是否可以實現像react-virtualized這樣的粘性標題？如果不是，那麼需要什麼來使react-virtualized支持他們？

謝謝！

2016-10-23 wisew

Hi @wisew。根據我的知識，你所描述的並不是真正可能的反應 - 虛擬化。我有限的'位置：粘性'實驗讓我相信這是一個性能殺手。 :( – brianvaughn

在這種情況下'ScrollSync'會有用嗎？https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/ScrollSync – Mbrevda

我們對您有類似的要求 - 我們需要一個支持粘滯標題的列表。我們無法通過react-virtualized Lists/Grids來實現，因此我創建了支持粘性頭文件的https://github.com/marchaos/react-virtualized-sticky-tree。

它只呈現顯示可見列表和所有父節點所需的內容，以便它們可以保持「粘性」。從DOM中刪除任何父母然後變得不粘連。請注意，它也支持嵌套粘性層。

請參閱示例here。

（聲明：我是作者）

2017-07-10 08:15:21 marchaos

雖然這個鏈接可能回答這個問題，但最好包括 - [發表評論]（/ review/low-quality-posts/16663324） –

添加額外的信息關於這個問題，並提供鏈接供參考。以提供非鏈接唯一的答案。 – marchaos

回答