s-intersect

s-intersect runs an expression the moment its element scrolls into view. It wraps an IntersectionObserver so you can lazy-load, reveal on scroll, or fire analytics without writing observer boilerplate.

<div s-data="{ seen: false }">
  <div s-intersect="seen = true" class="s-card" style="padding:1rem">
    <p s-text="seen ? 'This block is in view.' : 'Scroll me into view.'"></p>
  </div>
</div>

#Enter and leave

By default the expression runs when the element becomes visible. Add the :leave part to run when it goes out of view instead. You can use both on one element.

<div s-intersect="playing = true" s-intersect:leave="playing = false"></div>

#Modifiers

• .once stops observing after the first time it fires.
• .half waits until the element is at least half visible.
• .full waits until it is almost entirely visible.

<img src="hero.jpg" s-intersect.once="loaded = true">
<section s-intersect.half="active = true"></section>

#s-resize

Its sibling s-resize runs an expression whenever the element changes size, exposing the new box as $width and $height.

<div s-resize="w = $width" s-text="Math.round(w) + 'px wide'"></div>

Both directives detach their observers automatically when the element is removed, so there is nothing to clean up.