Comment puis-je savoir la direction de défilement du serveur D'intersection?

comparer boundingClientRect et rootBoundsentry, vous pouvez facilement savoir si la cible est au-dessus ou au-dessous du viewport.

pendant callback(), vous cochez isAbove / isBelow puis, à la fin, vous le stockez dans wasAbove/wasBelow. La prochaine fois, si la cible arrive dans viewport (par exemple), vous pouvez vérifier si elle était au-dessus ou en dessous. Donc tu sais si ça vient du haut ou du bas.

Vous pouvez essayer quelque chose comme ceci:

var wasAbove = false;

function callback(entries, observer) {
    entries.forEach(entry => {
        const isAbove = entry.boundingClientRect.y < entry.rootBounds.y;

        if (entry.isIntersecting) {
            if (wasAbove) {
                // Comes from top
            }
        }

        wasAbove = isAbove;
    });
}

J'espère que cela vous aidera.

:)

Je ne pense pas que ce soit possible avec une seule valeur de seuil. Vous pourriez essayer de regarder pour le intersectionRatio qui, dans la plupart des cas, est quelque chose en dessous de 1 quand le container quitte le viewport (parce que l'observateur d'intersection tire async). Je suis presque sûr que ça pourrait être 1 trop cependant si le navigateur rattrape assez rapidement. (Je n'ai pas testé ce :D )

mais ce que vous pourriez peut-être faire est d'observer deux seuils en utilisant plusieurs valeurs. :)

threshold: [0.9, 1.0]

Si vous obtenez un événement pour l' 0.9 d'abord il est clair que le conteneur entre dans le viewport...

J'espère que cela vous aidera. :)

Mon exigence était:

• ne rien faire sur scroll-up
• sur faites défiler vers le bas, de décider si un élément a commencé à cacher l'écran de haut

j'ai besoin de voir quelques informations fournies par IntersectionObserverEntry:

• intersectionRatio (qui devrait être à la baisse de 1.0)
• lindingclientrect.bas
• lindingclientrect.hauteur

alors le rappel a fini par ressembler à:

intersectionObserver = new IntersectionObserver(function(entries) {
  const entry = entries[0]; // observe one element
  const currentRatio = intersectionRatio;
  const newRatio = entry.intersectionRatio;
  const boundingClientRect = entry.boundingClientRect;
  const scrollingDown = currentRatio !== undefined && 
    newRatio < currentRatio &&
    boundingClientRect.bottom < boundingClientRect.height;

  intersectionRatio = newRatio;

  if (scrollingDown) {
    // it's scrolling down and observed image started to hide.
    // so do something...
  }

  console.log(entry);
}, { threshold: [0, 0.25, 0.5, 0.75, 1] });

Voir mon post pour les codes complets.

De cette Comment puis-je déterminer la direction d'un événement jQuery scroll? ainsi que votre code , j'ai fait le code suivant , l'essayer :

var options = {
  rootMargin: '0px',
  threshold: 1.0
               }

function callback(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
    
  var scroll =document.getElementById("scroll").value;   
  console.log(entry.target.innerHTML+"  i am going   "+scroll);    
        
      
    }
  });
};


 var elementToObserve = document.querySelector('#element');
  var observer = new IntersectionObserver(callback, options);
    observer.observe(elementToObserve);
      
var x = 0;
$(window).scroll(function(event){
   var y = $(this).scrollTop();
     if (y > x){
     $("#scroll").val("up");              
      } else {
    $("#scroll").val("down");    
    
       }
      x = y;
    });

#element {
  margin: 1500px auto;
  width: 150px;
  height: 150px;
  background: #ccc;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 25px;
  text-align: center;
  line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="element">Observed</div>
<input type=hidden id=scroll>