IntersectionObserver přijímá několik prahových hodnot

IntersectionObserver API je poměrně nové API, které pomáhá vývojářům zjistit, zda je prvek viditelný nebo viditelný. během rolování. Řeší problém používání nákladných operací, jako je volání getBoundingClientRect uvnitř manipulátorů posouvání, což může vést k trhanému posouvání.

Dan Callahan napsal článek na toto téma a i když jsem strávil spoustu času kopáním IntersectionObservers (Mluvím o tom) zmínil něco, co mi zatím uniklo.

Obvykle inicializujete IntersectionObserver takhle:

// this fires when:
//   1. The target begins entering the viewport (0 < ratio < 1).
//   2. The target fully leaves the viewport (ratio <= 0).
let observer = new IntersectionObserver(handler, {
    threshold: 0
});

Výše uvedený úryvek definuje jednu prahovou hodnotu pro IntersectionObserver . Ale je také možné definovat několik prahů!!!

// this fires when:
//   1. The target begins entering the viewport (0 < ratio < 1).
//   2. The target fully enters the viewport (ratio >= 1).
//   3. The target begins leaving the viewport (1 > ratio > 0).
//   4. The target fully leaves the viewport (ratio <= 0).
let observer = new IntersectionObserver(handler, {
  threshold: [0, 1]
});

Nechápu, jak mi to mohlo uniknout!