onIntersect

Viewport directives: onIntersect, onVisible, onHidden, and onScrolledIntoView.

import { html, onIntersect, onVisible, onHidden, onScrolledIntoView } from 'mates';

// Full enter + leave
html`<div ${onIntersect({
  onVisible() { player.play(); },
  onHidden()  { player.pause(); },
  rootMargin: '200px',
  threshold: 0,
})}></div>`;

// Shortcuts
html`<div ${onVisible(() => loadNextPage())}></div>`;
html`<video ${onHidden(() => video.pause())}></video>`;

// Genuine hidden → visible crossing (skips the initial observation)
html`<div ${onScrolledIntoView(() => loadNextPage(), { rootMargin: '300px' })}></div>`;

Overview

onIntersect({ onVisible?, onHidden?, rootMargin?, threshold? }) wraps IntersectionObserver as an element directive. Callbacks fire with no entry argument — keep them lightweight.

onVisible(cb, opts?) and onHidden(cb, opts?) are shortcuts that only register one side of the transition. onScrolledIntoView(cb, opts?) fires only on a genuine hidden-to-visible crossing and skips the observer’s first report, so an element that is already on screen at mount does not trigger it.

onIntersect vs shortcuts

API	Fires on	Notes
`onIntersect({…})`	Enter and/or leave	Full options object; both callbacks optional.
`onVisible(cb, opts?)`	Enter only	Handy for infinite-scroll sentinels and prefetch.
`onHidden(cb, opts?)`	Leave only	Pause media, stop work when off-screen.
`onScrolledIntoView(cb, opts?)`	Enter after leave	Skips the initial observation. `lazyLoad` is the deprecated alias.

Scroll-triggered reveal

onIntersect wraps IntersectionObserver as an element directive. Each item fades and slides in the first time it scrolls into view. The observer is automatically disconnected when the element is removed.

import { html, atom, onIntersect, renderApp } from 'mates';

const App = () => {

const visible = atom(new Set());

return () => html`

${Array.from({ length: 12 }, (_, i) => html`

<div

${onIntersect({

onVisible: () => visible.set(s => new Set([...s, i])),

})}

class="card card-body"

style="

opacity:${visible().has(i) ? 1 : 0};

transform:translateY(${visible().has(i) ? 0 : 20}px);

transition:all .3s ${i * 50}ms

Item ${i + 1} — appeared when scrolled into view

</div>

`)}

</div>

};

renderApp(App, document.getElementById('app'));

onVisible shortcut

onVisible(cb) fires when the element enters the viewport — handy for infinite-scroll sentinels.

import { html, atom, onVisible, renderApp } from 'mates';

const App = () => {

const hits = atom(0);

return () => html`

<p class="label">Visible hits: ${hits()}</p>

${Array.from({ length: 8 }, (_, i) => html`

Row ${i + 1}

</div>

`)}

</div>

};

renderApp(App, document.getElementById('app'));

onScrolledIntoView

Fires on a real hidden-to-visible crossing. An element already in view at mount does not count. lazyLoad is the same function, marked deprecated.

import { html, atom, onScrolledIntoView, renderApp } from 'mates';

const App = () => {

const pages = atom(1);

return () => html`

<p class="label">Pages loaded: ${pages()}</p>

<div style="height:520px" class="card card-body">Scroll down</div>

<div ${onScrolledIntoView(() => pages.set(n => n + 1), { rootMargin: '80px' })}>

Sentinel — pages: ${pages()}

</div>

};

renderApp(App, document.getElementById('app'));

API — onIntersect / onVisible / onHidden / onScrolledIntoView

import { onIntersect, onVisible, onHidden, onScrolledIntoView } from 'mates'

Prop / Option	Type	Default	Description
`onIntersect(options)`*	`ElementDirective`	—	Observe enter/leave. Apply as html` `.
`options.onVisible`	`() => void`	`undefined`	Called every time the element enters the viewport.
`options.onHidden`	`() => void`	`undefined`	Called every time the element leaves the viewport.
`options.threshold`	`number`	`0`	Intersection ratio (0–1) at which callbacks fire. 0 = any pixel visible.
`options.rootMargin`	`string`	`'0px'`	CSS margin around the root. Positive values fire early (e.g. '200px' for prefetch).
`onVisible(callback, options?)`	`ElementDirective`	—	Shortcut for onIntersect({ onVisible: callback, ...options }).
`onHidden(callback, options?)`	`ElementDirective`	—	Shortcut for onIntersect({ onHidden: callback, ...options }).
`onScrolledIntoView(callback, options?)`	`ElementDirective`	—	Fires when the element crosses from hidden to visible. Skips the observer’s first report, so an already-visible mount does not call the callback. options.rootMargin and options.threshold are fixed at mount; the callback stays fresh.
`lazyLoad(callback, options?)`	`ElementDirective`	—	Deprecated alias of onScrolledIntoView. Same behavior.