Comment appliquer la virtualisation des lignes pour une table / liste dans HTML / CSS / JS?

Je voudrais créer une table / liste HTML personnalisée avec beaucoup de lignes. J'ai besoin de la virtualisation des lignes, mais je ne suis pas sûr de savoir quel est le meilleur moyen d'y parvenir.

Par la virtualisation des lignes, je me réfère au concept où les lignes de la table / ul / div ne sont pas visibles ou rendues du tout, pour autant qu'elles ne soient pas déroulées dans la vue. Fondamentalement, le but est d'éliminer le rendu si l'objet n'est jamais affiché (derrière un défilement).

Des idées? Je pense que les éléments DOM doivent être ajoutés à la liste dès qu'ils «se déplacent dans la vue». Et puis, je devrais avoir une div invisible avec la hauteur de la hauteur totale de toutes les lignes pour rendre possible le défilement.

Y a-t-il des exemples de code simples qui accomplissent cela?

• Comment afficher / masquer une grande image en cliquant sur les vignettes?
• Pourquoi <marquee> est-il obsolète et quelle est la meilleure alternative?
• Faire pivoter le texte dans IE, sans qu'il devienne moche
• Utilisation de Modernizr et jQuery pour animer si les transitions CSS3 n'existent pas
• Est-il possible d'obtenir la propriété css actuelle lors d'une transition en Javascript?

• Calculez les dimensions absolues d'un div tourné en perspective avec css3
• CSS Transition échoue sur jQuery .load callback
• Animation de rotation infinie à l'aide de CSS et Javascript
• Écriture css3 sans douleur
• Comment faire tourner l'objet avec la traînée, comment obtenir un point de rotation autour de l'origine, utilisez le péché ou le cos?