确定HTML表格中当前可见的顶部和底部行的JS/VueJS实现方法

Question

我有一个标准的HTML表格，其中包含thead和tbody，tbody中的行数可以是任意数量，因为它取决于数组的大小。

表格有一个最大高度，因此可以滚动。当表格滚动时，我希望能够计算出新显示的顶部和底部行。

此外，我不能使用jquery来实现这个，我只想使用javascript。

我尝试了这个问题的被接受的答案，但似乎不准确，有时会错误地计算出2-7行的数量... 确定html表格中的顶部行

Answer 1

您可以使用IntersectionObserver API来检查父表格中可见的行。为每一行添加一个交叉观察器，并使用isIntersecting来检查行是否可见。

const rows = document.querySelector('.row')

const rowsObserver = new IntersectionObserver(entries => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          (在这里添加您的代码)
        } else {
          (在这里添加您的代码)
        }
      })
    })

rowsObserver.observe(rows)

要计算第一个和最后一个可见的行，您可以在它们的可见性发生变化时将每一行添加或移除到一个“visibleElements”数组中，或者切换一个“visible”类。