daily pastebin goal
12%
SHARE
TWEET

Untitled

a guest Jun 14th, 2018 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <title>IntersectionObserver demo</title>
  5.   <style>
  6.     body {
  7.       margin: 0 auto;
  8.       padding: 10px;
  9.       max-width: 800px;
  10.       display: flex;
  11.     }
  12.     .container {
  13.       width: 200px;
  14.       height: 600px;
  15.       overflow-y: scroll;
  16.     }
  17.     .box {
  18.       height: 100px;
  19.       display: flex;
  20.       justify-content: center;
  21.       align-items: center;
  22.       border: none;
  23.       margin: 0;
  24.       padding: 0;
  25.     }
  26.     .box:nth-child(even) {
  27.       background: #aaa;
  28.     }
  29.     .box:nth-child(odd) {
  30.       background: #ccc;
  31.     }
  32.     .display {
  33.       width: 200px;
  34.       height: 100%;
  35.       margin-left: 50px;
  36.     }
  37.   </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41.   <div id="box0" class="box">
  42.     Hello
  43.   </div>
  44.   <div id="box1" class="box">
  45.     this
  46.   </div>
  47.   <div id="box2" class="box">
  48.     is
  49.   </div>
  50.   <div id="box3" class="box">
  51.     a
  52.   </div>
  53.   <div id="box4" class="box">
  54.     list
  55.   </div>
  56.   <div id="box5" class="box">
  57.     of
  58.   </div>
  59.   <div id="box6" class="box">
  60.     items
  61.   </div>
  62.   <div id="box7" class="box">
  63.     using
  64.   </div>
  65.   <div id="box8" class="box">
  66.     Intersection
  67.   </div>
  68.   <div id="box9" class="box">
  69.     Observer
  70.   </div>
  71.   <div id="box10" class="box">
  72.     Here
  73.   </div>
  74.   <div id="box11" class="box">
  75.     are
  76.   </div>
  77.   <div id="box12" class="box">
  78.     some
  79.   </div>
  80.   <div id="box13" class="box">
  81.     more
  82.   </div>
  83.   <div id="box14" class="box">
  84.     elements.
  85.   </div>
  86. </div>
  87. <pre class="display">Output:
  88.  
  89. </pre>
  90. <script>
  91. document.addEventListener('DOMContentLoaded', () => {
  92.  
  93.   const $ = document.querySelector.bind(document)
  94.   const $$ = _ => Array.from(document.querySelectorAll(_))
  95.   const display = $('.display')
  96.  
  97.   function log(str) {
  98.     display.textContent += (str || '') + '\n'
  99.   }
  100.  
  101.   function onObserve(entries) {
  102.     entries.forEach(entry => {
  103.       const {
  104.         isIntersecting,
  105.         intersectionRatio
  106.       } = entry
  107.       const id = entry.target.id
  108.       log(`id: ${id}, isIntersecting: ${isIntersecting}, intersectionRatio: ${intersectionRatio}`)
  109.     })
  110.   }
  111.  
  112.   const observer = new IntersectionObserver(onObserve, {
  113.     root: $('.container'),
  114.     rootMargin: '0px 100%',
  115.     threshold: 0
  116.   })
  117.   $$('.box').forEach(el => {
  118.     observer.observe(el)
  119.   })
  120.  
  121. })
  122. </script>
  123. </body>
  124. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top