HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>log skipped</title>
  <style>
    .spacer { height: 140vh; background: #f1f5f9; }
    #panel { padding: 1rem; border: 2px solid #64748b; }
  </style>
</head>
<body>
  <p>Scroll down far past the panel, then scroll back up.</p>
  <div id="panel">Auto-visibility panel</div>
  <textarea id="log" rows="8" cols="40" readonly></textarea>
  <div class="spacer">Scroll space…</div>
  <script>
    var panel = document.getElementById("panel");
    var log = document.getElementById("log");
    panel.addEventListener("contentvisibilityautostatechange", function (event) {
      log.textContent += "skipped=" + event.skipped + "\n";
    });
    panel.style.contentVisibility = "auto";
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element contentvisibilityautostatechange — log skipped (Try It)