Visual Intersection Observer

![npm](https://www.npmjs.com/package/@juo/visual-intersection-observer)

Visual vs Layout Viewport

Problem

There is a great Intersection Observer API that allows (among others) to observe if website elements are present in the viewport or not. The missing part in that API is that one can never use Visual Viewport as the root for the IntersectionObserver. At the time of writing, there is an open discussion regarding this issue here.

So, in other words, IntersectionObserver works great as long as the user does not zoom the website in or out. As soon as this happens, the intersections reported by the IntersectionObserver are invalid.

Solution

A Visual Intersection Observer that acts as a wrapping utility for the Intersection Observer, which modifies the rootMargin appropriately to the Visual Viewport.

Here's the demo to see it in action.

Getting started

$3

With a package manager:

``npm install @juo/visual-intersection-observer`

CDN:

`$3`

Visual Intersection Observer works just like the Intersection Observer with one caveat: you can't specify root option.

`ESM`


import { VisualIntersectionObserver } from '@juo/visual-intersection-observer';
UMD

const { VisualIntersectionObserver } = window['visual-intersection-observer'];
// Create an observer that logs entries to the console
const ob = new VisualIntersectionObserver((entries) => {
  console.log(entries);
});

// Observe an element ob.observe(document.getElementById('foo'));``

Known issues

- When the document width is larger than the viewport, the intersection is not computed properly on mobile devices.
- Chrome and Firefox on mobile sometimes report an incorrect width/height of the Visual Viewport

Problem

Solution

A Visual Intersection Observer that acts as a wrapping utility for the Intersection Observer, which modifies the rootMargin appropriately to the Visual Viewport.

Here's the demo to see it in action.

ESM

import { VisualIntersectionObserver } from '@juo/visual-intersection-observer';

UMD

const { VisualIntersectionObserver } = window['visual-intersection-observer'];

// Create an observer that logs entries to the console
const ob = new VisualIntersectionObserver((entries) => {
console.log(entries);
});

// Observe an element
ob.observe(document.getElementById('foo'));