Implémentation JS/VueJS pour déterminer les lignes supérieure et inférieure actuellement visibles dans un tableau HTML
P粉103739566
P粉103739566 2023-09-10 19:23:08
0
1
520

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

P粉103739566
P粉103739566

répondre à tous(1)
P粉161939752

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".

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal