У меня есть виртуализированный список, в котором я отображаю элементы в абсолютном положении. И я хочу отображать липкие заголовки (необязательно) влево/вверху/справа/внизу. Это работает почти правильно, но во время прокрутки существует задержка между элементами в заголовках и в таблице. < /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
