Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
    <style>
      .headline {
        text-align: center;
      }
      .quote {
        padding: 1rem;
        height: 120vh;
        width: 200vw;
      }
      .placeholder {
        margin: 2rem;
      }
    </style>
  </head>
  <body>
    <h1 class="headline">Test page for hello@hashtag-labs.com</h1>
    <div class="quote">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="placeholder">
      <img id="myimage" src="https://hashtag-labs.com/banner.jpeg" width="300" height="250" />
    </div>
    <div class="quote">
      Egestas diam in arcu cursus euismod quis viverra nibh cras. Eget nullam non nisi est sit amet facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Aliquam ultrices sagittis orci a. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Pulvinar elementum integer enim neque volutpat ac tincidunt. Sed viverra tellus in hac. Dignissim sodales ut eu sem. Nec ullamcorper sit amet risus nullam eget. Leo in vitae turpis massa. Ut eu sem integer vitae justo eget magna fermentum iaculis. Orci sagittis eu volutpat odio facilisis mauris sit amet massa.
    </div>
    <script>
      let isInViewport = false;
      
      const target = document.getElementById('myimage');
      
      const observer = new IntersectionObserver(([entry]) => {
        isInViewport = entry.isIntersecting
      }, {
        threshold: 1.0
      });
​
      observer.observe(target);
​
      setInterval(() => {
        console.log(isInViewport ? 'viewable' : 'non-viewable')
      }, 2000)
    </script>
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers