import inViewport from '@pim.sk/utils/inViewport.mjs'Fires onViewport() when a matched element enters the browser viewport. Listens to window scroll via requestAnimationFrame.
options = {
selector: ".my-el", // CSS selector
onViewport: (el) => {}, // callback — receives DOM element
once: true, // default — fire only the first time
full: false, // default — partial visibility is enough
}item-1item-2item-3
new inViewport({
selector: ".ivp-basic-item",
once: true,
onViewport: el => {
console.log(el.textContent.trim() + " is in viewport")
setTimeout(() => {
output.textContent += el.textContent.trim() + " is in viewport\n"
}, 1000);
}
})once: true (default) — onViewport fires only the first time the element enters the viewport. once: false — fires every time it re-enters.
once = true // default — fires once per element
once = false // fires every time element enters viewportScroll away and back to test
let count = 0
new inViewport({
selector: ".ivp-once-target",
once: false,
onViewport: el => {
output.textContent = `entered viewport ${++count}×`
}
})full: false (default) — triggers as soon as the top-left corner of the element enters the viewport. full: true — requires the entire element to be visible.
full = false // default — partial visibility triggers (top-left corner in view)
full = true // entire element must be visibleTarget element
const vp = new inViewport({ selector: ".target", full: true })
// manual check
const visible = vp.isView()Returns true/false on demand. Check if a specific element is currently in the viewport without a scroll callback.
// isView( opt ) — opt can be:
// undefined → first element (index 0)
// number → element by index
// string → CSS selector
// DOM elementTarget element — scroll away to test
const vp = new inViewport({ selector: ".ivp-isview-el" })
btn.addEventListener("click", () => {
const visible = vp.isView()
output.textContent = "isView() → " + visible
})