HTML5 Overview 🏗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

table
├── thead
│   └── tr
│       └── th
├── tbody
│   └── tr
│       └── td
└── tfoot
    └── tr
        └── td

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const option = {
    root: null,
    rootMargin: '0px',
    threshold: 0.7, // or an array [0.1, 0.2, ...]
};

const callback = (entries, observer) => {
    entries.forEach((entry) => {
        // Each entry describes an intersection change for one observed
        // target element:
        //   entry.boundingClientRect
        //   entry.intersectionRatio
        //   entry.intersectionRect
        //   entry.isIntersecting
        //   entry.rootBounds
        //   entry.target
        //   entry.time
    });
};
const observer = new IntersectionObserver(callBack, option);

observer.observer(nodeOne); //observing only nodeOne
observer.observer(nodeTwo); //observing both nodeOne and nodeTwo
observer.unobserve(nodeOne); //observing only nodeTwo
observer.disconnect(); //not observing any node