JavaScript côté navigateur : IntersectionObserver

Soutenez Grafikart:

Retrouvez Grafikart sur:

[_Greenflag_]

Thanks.
Pour partager un petit bug que j'ai eu et pour ne pas le reproduire : j'avais dans mon code un intersectionObserver et dans un autre endroit plus loin un setFocus( ). Ce que faisait le navigateur sans que je le comprenne tout de suite est de faire un scrolldown à l'endroit en une fraction de seconde puis revenait au début de page. Et bien je suis passé plus d'une demi-heure comme un con à décortiquer mon intersectionObserver, pourquoi il se mettait en route dès le début de la page alors que l'intersectionRatio n'était pas atteint au top de la page.

Morale de l'histoire : si on utilise un IntersectionObserver, ne pas utiliser de SetFocus ( ) ou autre méthode qui donne le focus à un autre endroit sous peine de ne pas avoir l'effet d'apparition désiré.

[aquisiteur]

Ah mais trop bien ça !!!! je me suis cassé le cul à faire autrement je connaissais pas ça

[regisf]

quelqu'un a remarqué que sur certains téléphones mobiles la class"reveal-visible" de s'affiche pas ??

[LuuxisHD]

salut comment vas-tu.
habituellement on aurait pas plutôt habitude de le faire avec du CSS ce genre d'animation ?

[guillaumerobert]

Bonjour, est ce que les rootMargin négatives fonctionnent pour observer l'intersection "plus à l'intérieur" de la fenêtre ?
Merci Grafikart 😀

[consciencedimension]

petites notes si vous utiliser un markdown viewer comme obsidian

# IntersectionObserver API

détecter lorsqu'un élément apparait à l'écran
e.g défilement infini commentaires YT,
ou effet d'animation sur les éléments entrants, sortant lorsqu'on scroll une page

`const observer = new IntersectionObserver(callback, options);`

## basics

```js
const observer = new => {console.log(entries)})


```

html
```
<div style="height:1000px"></div> //height pour créer du défilement
<button
<div style="height:1000px"></div>
<button
<div style="height:1000px"></div>
```

`$Array [ IntersectionObserverEntry, IntersectionObserverEntry ]`
dès qu'un button apparait ou disparait console `$Array [IntersectionObserverEntry]`

```js
const observer = new => {
for (const entry of entries) {
console.log(entry.target, entry.isIntersecting);
}
}); //! isVisible marche pas


```

quand button visible
`$<button class="btn1">Bonjour</button> true`

effet d'animation
```js
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.animate(
[
{ transform: "translateX(-10px)", opacity: 0 },
{ transform: "translateX(0px)", opacity: 1 },
],
{
duration: 300,
}
);
}
}
```
variante ^cf5117
```js
{
duration: 300,
}
);
anim only
}
}
```

## Options

`root:` par défaut, la page
`rootMargin:` va créer une sorte un margin autour de l'élément
donc la marge de l'élément sera "visible" avant l'élément
`threshold:` % à partir duquelle l'élément devient 'visible'.
ex:
ajoutons au HTML
```js
const observer = new => { console.log(entries) }, { threshold: 0.5}); // % à partir duquelle l'élément devient 'visible'
```

`observer.unobserve()`
[[IntersectionObserver API#^cf5117|voir plus haut]]

`observer.disconnect()`
```js


observer.disconnect()//les effets annulés
//remis


```