JS/VueJS-Implementierung zur Bestimmung der aktuell sichtbaren oberen und unteren Zeilen in einer HTML-Tabelle

Question

Ich habe eine Standard-HTML-Tabelle, die thead und tbody enthält. Die Anzahl der Zeilen in tbody kann beliebig sein, da sie von der Größe des Arrays abhängt.

Die Tabelle hat eine maximale Höhe, sodass sie gescrollt werden kann. Während die Tabelle scrollt, möchte ich in der Lage sein, die neu angezeigten oberen und unteren Zeilen zu berechnen.

Außerdem kann ich JQuery nicht verwenden, um dies zu erreichen, ich möchte nur Javascript verwenden.

Ich habe die akzeptierte Antwort auf diese Frage ausprobiert, aber sie scheint ungenau zu sein und zählt manchmal die Anzahl der Zeilen 2–7 falsch ... Bestimmung der obersten Zeile in einer HTML-Tabelle

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”类。