在父级上设置滚动时渲染虚拟列表

Question

我有一个问题，我想使用虚拟列表来渲染很多项目，之前我曾经在虚拟列表表元素上滚动，我会使用“scrollTop”来找出滚动的量并将其除以高度列表中的项目找出数组中项目的索引，我应该从中渲染它，如下所示：

    const scrolledTop = tableElement.scrollTop;
    const pos = Math.floor(scrolledTop / itemHeight);

因此“pos”将具有要渲染的项目的索引。每当用户在“tableElement”上触发滚动事件时就会完成此计算

问题是现在我想在父元素上滚动而不是在表格上滚动，因为父元素有一些图表和该表格，并且我希望能够滚动这些图表而不是它们停留在顶部。但现在我不知道如何计算应该从哪个索引渲染项目的“pos”，因为现在当我滚动时，表元素上的“scollTop”属性返回 0。

Answer 1

可以计算相对于父元素的滚动位置。

// Assuming 'parentElement' is the element with the scroll
// and 'itemHeight' is the height of each item in the list
const parentElement = document.getElementById('parentElement'); // Replace with your parent element's ID
const itemHeight = 50; // Replace with your actual item height

// Calculate the scroll position of the parent element
const scrolledTop = parentElement.scrollTop;

// Calculate the index of the item to render
const pos = Math.floor(scrolledTop / itemHeight);

// Use 'pos' to determine which items to render