Question

53

How do I know the IntersectionObserver scroll direction?

rated 0 times [ 54] [ 1] / answers: 1 / hits: 42648 / 7 Years ago, thu, september 28, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tatumm

Add To Favorites

Follow

Total Points: 47

Total Questions: 92

Total Answers: 89

Location: Palau

Member since Tue, May 30, 2023

1 Year ago

answered 7 Years ago victorr · Accepted Answer

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].