content-visiblity Without Jittery Scrollbars

/* Diferir el render del segundo articulo en adelante */
body > main > *+* {
  content-visibility: auto;
}

<script type="module">
  let observer = new IntersectionObserver(
    (entries, o) => {
      entries.forEach((entry) => {
        let el = entry.target;
        // No esta actualmente dentro del area de interseccion.
        if (entry.intersectionRatio == 0) {
          return;
        }
        // Fuerza el render para elementos dentro del area de scroll
        // que aun no hayan sido marcados.
        if (!el.markedVisible) {
          el.attributeStyleMap.set(
            "content-visibility",
            "visible"
          );
          el.markedVisible = true;
        }
      });
    },
    // Define un margen de render de 50px arriba
    // y 100px debajo del area principal.
    { rootMargin: "50px 0px 100px 0px" }
  );

  let els =
    document.querySelectorAll("body > main > *+*");
  els.forEach((el) => { observer.observe(el); });
</script>