function ArticleBody({ url, domain, content, readUpToIndex}) {
const parentRef = useRef(null)
const virtualizer = useWindowVirtualizer({
count: content.length,
estimateSize: () => 100,
overscan: 5,
scrollMargin: 100,
})
return <>
<div ref={parentRef}>
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
width: '100%',
position: 'relative'
}}
>
{virtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={virtualizer.measureElement}
style={{
position: 'absolute',
// top: `${virtualRow.start - virtualizer.options.scrollMargin}px`,
top: 0,
transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
left: 0,
width: '100%'
}}
>
<ArticleContent block={content[virtualRow.index]} />
</div>
))}
</div>
</div>
</>
}
function ArticleBody({ url, domain, content, readUpToIndex}) {
const parentRef = useRef(null)
const virtualizer = useWindowVirtualizer({
count: content.length,
estimateSize: () => 100,
overscan: 5,
scrollMargin: 100,
})
return <>
<div ref={parentRef}>
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
width: '100%',
position: 'relative'
}}
>
{virtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={virtualizer.measureElement}
style={{
position: 'absolute',
// top: `${virtualRow.start - virtualizer.options.scrollMargin}px`,
top: 0,
transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
left: 0,
width: '100%'
}}
>
<ArticleContent block={content[virtualRow.index]} />
</div>
))}
</div>
</div>
</>
}