How do I know the IntersectionObserver scroll direction?

Question

So, how do I know the scroll direction when the event it's triggered?

In the returned object the closest possibility I see is interacting with the boundingClientRect kind of saving the last scroll position but I don't know if handling boundingClientRect will end up on performance issues.

Is it possible to use the intersection event to figure out the scroll direction (up / down)?

I have added this basic snippet, so if someone can help me.
I will be very thankful.

Here is the snippet:

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

function callback(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('entry', entry);
    }
  });
};

var elementToObserve = document.querySelector('#element');
var observer = new IntersectionObserver(callback, options);

observer.observe(elementToObserve);

#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;
}

<div id="element">Observed</div>

I would like to know this, so I can apply this on fixed headers menu to show/hide it

Answer 1

I don't know if handling boundingClientRect will end up on performance issues.

MDN states that the IntersectionObserver does not run on the main thread:

This way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit.

MDN, "Intersection Observer API"

We can compute the scrolling direction by saving the value of IntersectionObserverEntry.boundingClientRect.y and compare that to the previous value.

Run the following snippet for an example:

const state = document.querySelector('.observer__state')
const target = document.querySelector('.observer__target')

const thresholdArray = steps => Array(steps + 1)
 .fill(0)
 .map((_, index) => index / steps || 0)

let previousY = 0
let previousRatio = 0

const handleIntersect = entries => {
  entries.forEach(entry => {
    const currentY = entry.boundingClientRect.y
    const currentRatio = entry.intersectionRatio
    const isIntersecting = entry.isIntersecting

    // Scrolling down/up
    if (currentY < previousY) {
      if (currentRatio > previousRatio && isIntersecting) {
        state.textContent ="Scrolling down enter"
      } else {
        state.textContent ="Scrolling down leave"
      }
    } else if (currentY > previousY && isIntersecting) {
      if (currentRatio < previousRatio) {
        state.textContent ="Scrolling up leave"
      } else {
        state.textContent ="Scrolling up enter"
      }
    }

    previousY = currentY
    previousRatio = currentRatio
  })
}

const observer = new IntersectionObserver(handleIntersect, {
  threshold: thresholdArray(20),
})

observer.observe(target)

html,
body {
  margin: 0;
}

.observer__target {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 1500px 0;
  background: rebeccapurple;
}

.observer__state {
  position: fixed;
  top: 1em;
  left: 1em;
  color: #111;
  font: 400 1.125em/1.5 sans-serif;
  background: #fff;
}

<div class="observer__target"></div>
<span class="observer__state"></span>

---

If the thresholdArray helper function might confuse you, it builds an array ranging from 0.0 to 1.0by the given amount of steps. Passing 5 will return [0.0, 0.2, 0.4, 0.6, 0.8, 1.0].

Answer 2

This solution is without the usage of any external state, hence simpler than solutions which keep track of additional variables:

const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.boundingClientRect.top < 0) {
          if (entry.isIntersecting) {
            // entered viewport at the top edge, hence scroll direction is up
          } else {
            // left viewport at the top edge, hence scroll direction is down
          }
        }
      },
      {
        root: rootElement,
      },
    );

Answer 3

Comparing boundingClientRect and rootBounds from entry, you can easily know if the target is above or below the viewport.

During callback(), you check isAbove/isBelow then, at the end, you store it into wasAbove/wasBelow. Next time, if the target comes in viewport (for example), you can check if it was above or below. So you know if it comes from top or bottom.

You can try something like this:

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;
    });
}

Hope this helps.

Answer 4

My requirement was:

• do nothing on scroll-up
• on scroll-down, decide if an element started to hide from screen top

I needed to see a few information provided from IntersectionObserverEntry:

• intersectionRatio (should be decreasing from 1.0)
• boundingClientRect.bottom
• boundingClientRect.height

So the callback ended up look like:

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] });

See my post for complete codes.

Answer 5

:)

I don't think this is possible with a single threshold value. You could try to watch out for the intersectionRatio which in most of the cases is something below 1 when the container leaves the viewport (because the intersection observer fires async). I'm pretty sure that it could be 1 too though if the browser catches up quickly enough. (I didn't test this :D )

But what you maybe could do is observe two thresholds by using several values. :)

threshold: [0.9, 1.0]

If you get an event for the 0.9 first it's clear that the container enters the viewport...

Hope this helps. :)

Answer 6

The simplest way to do this would be to set a threshold value of 0.5, which uses the center of the element as a single trigger point, and then monitor intersectionRect.y.

When the element is observed, if intersectionRect.y is 0, this means the element crosses the top of the bounding box; whereas, if it is greater than 0, the element crosses the bottom of the bounding box.

You must also monitor the previous crossing (i.e. via outside) to determine whether or not the element is inside or outside the bounding box because the boolean value of intersectionRect.y must be inverted if the element exits the bounding box.

const
  observer = new IntersectionObserver(observedArr => {
    let
      direction = outside ? observedArr[0].intersectionRect.x : !observedArr[0].inersectionRect.y
    if (direction) // to bottom
    else // to top
    outside = !outside
  }, { threshold: .5 })

let
  outside = false