HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>getBoundingClientRect visible</title>
  <style>
    #target {
      width: 280px;
      height: 100px;
      margin: 600px auto 800px;
      background: #ea580c;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }
    #status { position: fixed; top: 12px; left: 12px; font-family: sans-serif; }
  </style>
</head>
<body>
  <div id="status">Scroll to the orange box</div>
  <div id="target">Target</div>
  <script>
    function check() {
      var rect = document.getElementById("target").getBoundingClientRect();
      var vh = window.innerHeight;
      var vw = window.innerWidth;
      var inView = rect.bottom > 0 && rect.right > 0 && rect.top < vh && rect.left < vw;
      document.getElementById("status").textContent = "in viewport: " + inView;
    }
    document.addEventListener("scroll", check);
    check();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.getBoundingClientRect — in viewport (Try It)