Липкие заголовки в виртуализированном списке/таблице ⇐ Html

[Anonymous]

У меня есть виртуализированный список, в котором я отображаю элементы в абсолютном положении. И я хочу отображать липкие заголовки (необязательно) влево/вверху/справа/внизу. Это работает почти правильно, но во время прокрутки существует задержка между элементами в заголовках и в таблице. < /P>
ref={scrollRef}
style={{
width,
height,
overflow: "auto",
position: "relative",
scrollBehavior: "smooth",
willChange: "transform",
}}
onScroll={(e) => handleScroll(e)}
>



{AbsoluteElementComponent ? (
{
const offset =
typeof columnWidths === "number"
? columnWidths * index
: elementVisibilityCols.sizesOffsetOfIndice[index];
return offset;
}}
getElementTopOffset={(index: number) => {
const offset =
typeof rowHeights === "number"
? rowHeights * index
: elementVisibilityRows.sizesOffsetOfIndice[index];
return offset;
}}
offsetVersion={offsetVersion}
/>
) : null}
{WrapperComponent ? (



) : (

)}


< /code>
Компонент липких заголовков. < /p>
style={{
position: "sticky",
top: 0,
left: 0,
zIndex: 10,
background: "white",
display: "flex",
flexDirection: "row",
animation: "500ms ease-in-out 0s normal none 1 running fadeInDown"
}}

>

{headers.top ? (

) : null}

etc


< /code>
Top Header < /p>
style={{
position: "absolute",
top: 0,
zIndex: 10,
background: "white",
display: "flex",
flexDirection: "row",
left: 0,

}}
>

{Array.from(
{
length:
visibleColumns.lastVisible - visibleColumns.firstVisible + 1,
},
(_, colIdx) => {
const columnIndex = visibleColumns.firstVisible + colIdx;
const style = getHeaderStyle({
indexPosition: columnIndex,
direction: "top",
rowHeights,
columnWidths,
size,
});
style.left -= scrollLeft;
return (

);
}
)}


) : (
style={{
height: header.size,
position: "absolute",
top: 0,
left: 0,
right: 0,
}}
>


< /code>
Я попытался использовать перевод непосредственно на липкий элемент, а эффект одинаково. Возможно ли достичь того, что я хочу. И откуда задержка. Когда я читаю, событие Onscroll происходит перед краской, поэтому кажется, что можно синхронизировать эти элементы, и вы можете синхронизировать два свитки.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... list-table