data-on-intersect

Run an expression when the element scrolls into (or out of) view. Backed by IntersectionObserver; the observer is disconnected when the element unmounts.

Syntax

data-on-intersect="$seen = true"
data-on-intersect__once="@get('/more')"
data-on-intersect__exit="$left++"
data-on-intersect__threshold.50="…"

part
key	forbidden
value	required: statements

Modifiers

modifier	effect
__once	disconnect after the first run
__exit	run when the element leaves the viewport instead of entering it
__threshold.N	how much of the element must be visible, in percent (default 0: any pixel)
__debounce.ms / __throttle.ms	timing

Count entries

every entry

Scroll the box: intersections

I am at the bottom.

<div data-signals="{ seen: 0 }">
  <p>Scroll the box: <b data-text="$seen"></b> intersections</p>
  <div style="height:6rem;overflow:auto;border:1px solid var(--sl-color-hairline)"><div style="height:9rem"></div><p data-on-intersect="$seen++">I am at the bottom.</p></div>
</div>

Infinite scroll with __once

The sentinel runs once and disconnects; the server’s response would normally append rows and a new sentinel.

__once

sentinel

more loaded: (scroll back up and down: it stays true)

<div data-signals="{ loaded: false }">
  <div style="height:6rem;overflow:auto;border:1px solid var(--sl-color-hairline)"><div style="height:9rem"></div><p data-on-intersect__once="$loaded = true" class="muted">sentinel</p></div>
  <p>more loaded: <b data-text="$loaded"></b> (scroll back up and down: it stays true)</p>
</div>

__exit and __threshold

Exit fires when the element leaves; the threshold demands that half of it is visible before “entering” counts.

__exit, __threshold.50

half of me must show

entered (≥50% visible): , left:

<div data-signals="{ entered: 0, left: 0 }">
  <div style="height:6rem;overflow:auto;border:1px solid var(--sl-color-hairline)"><div style="height:8rem"></div><p data-on-intersect__threshold.50="$entered++" data-on-intersect__exit="$left++" style="height:3rem;background:var(--sl-color-hairline);margin:0">half of me must show</p><div style="height:8rem"></div></div>
  <p>entered (≥50% visible): <b data-text="$entered"></b>, left: <b data-text="$left"></b></p>
</div>

Notes

Combine with @get for lazy loading, with __debounce to avoid bursts while scrolling quickly, and with __exit for “pause the video when it scrolls away”.

Register

import { onIntersect } from 'sigmx/plugins'

Registering onIntersect adds 445 bytes brotli (515 gzip, 1139 minified) on top of the core. See bundle sizes.