Implémentation JS/VueJS pour déterminer les lignes supérieure et inférieure actuellement visibles dans un tableau HTML

Question

J'ai un tableau HTML standard qui contient thead et tbody, le nombre de lignes dans tbody peut être n'importe quel nombre car cela dépend de la taille du tableau.

Le tableau a une hauteur maximale pour pouvoir le faire défiler. Au fur et à mesure que le tableau défile, je souhaite pouvoir calculer les lignes supérieure et inférieure nouvellement affichées.

De plus, je ne peux pas utiliser jquery pour y parvenir, je veux juste utiliser javascript.

J'ai essayé la réponse acceptée à cette question mais elle semble inexacte et compte parfois incorrectement le nombre de lignes 2 à 7... Détermination de la ligne supérieure dans un tableau html

Answer 1

Vous pouvez utiliser l'API IntersectionObserver pour vérifier les lignes visibles dans la table parent. Ajoutez un observateur d'intersection pour chaque ligne et utilisez isIntersecting pour vérifier si la ligne est visible.

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

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

rowsObserver.observe(rows)

Pour compter les première et dernière lignes visibles, vous pouvez ajouter ou supprimer chaque ligne d'un tableau "visibleElements" lorsque leur visibilité change, ou changer de classe "visible".