Is it possible to create an Intersection Observer that only detects an intersection for vertical changes?
I tried setting a large enough horizontal rootMargin for my purposes:
{
threshold: 1,
rootMargin: '-57px 300% 0px 300%',
}
But the resulting boundingClientRect still seems to only intersect with the viewport:
IntersectionObserverEntry {
boundingClientRect: DOMRect {
bottom: 441.1499938964844,
height: 175.91665649414062,
left: 250,
right: 2167.066650390625,
top: 265.23333740234375,
width: 1917.066650390625,
x: 250,
y: 265.23333740234375
},
intersectionRatio: 0.9879677284740576,
intersectionRect: {
bottom: 441.1499938964844,
height: 175.91665649414062,
left: 250,
right: 2144,
top: 265.23333740234375,
width: 1894,
x: 250,
y: 265.23333740234375
},
isIntersecting: false,
rootBounds: {
bottom: 1191.4833984375,
height: 1134.4833984375,
left: 0,
right: 8576,
top: 57,
width: 8576,
x: 0,
y: 57
}
Why is entry.intersectionRect.right limited to 2144 when rootBounds.right is 8576?