inViewport
Determines whether a given DOM element is visible within the current viewport, with an optional pixel buffer.
Basic example
Section titled “Basic example”True while any part of the element’s bounding box overlaps the browser viewport. Scroll this story partly out of view to see it flip. Charts with detectVisible use this to delay their first draw until they are on screen.
import {inViewport} from "@d3plus/dom";
// An element to test, in this example's container.
const badge = container.appendChild(document.createElement("span"));
badge.textContent = "badge";
inViewport(badge);
With buffer
Section titled “With buffer”The second argument shrinks the viewport by that many pixels on every side, so the element has to be well inside the window, not just touching its edge, before this reports true.
import {inViewport} from "@d3plus/dom";
// An element to test, in this example's container.
const badge = container.appendChild(document.createElement("span"));
badge.textContent = "badge";
// Only true once the element is at least 100px inside every viewport edge.
inViewport(badge, 100);
Parameters
import {inViewport} from "@d3plus/dom";