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
The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount.
The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
unobserve() The IntersectionObserver method unobserve() instructs the IntersectionObserver to stop observing the specified target element.
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.0
by the given amount of steps. Passing 5
will return [0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With