Detect if an element is in the viewport using the Intersection Observer API
MIT License
Breaking Changes
IntersectionObserverProps
or Entry
TypeScript interfaces from IntersectionObserver.svelte.d.ts
Use the Svelte ComponentProps
utility to extract component props.
import IntersectionObserver from "svelte-intersection-observer";
import type { ComponentProps } from "svelte";
type Props = ComponentProps<IntersectionObserver>;
Fixes
element
and root
prop types should be null | HTMLElement
to support TypeScript strict modeexports
field to package.json
Fixes
exports
field to package.json
to resolve Vite
development warnings (8b2f824, branch)Published by metonym almost 3 years ago
Features
observer
for garbage collection after disconnecting (b961e16)Documentation
Refactoring
null
from element
and root
types as HTMLElement
is already nullable (41a3609)Documentation
"svelte-intersection-observer"
importsvite
to vite
Refactoring
entry
prop typedef@event
, @slot
artifacts used by sveld to generate initial TypeScript definitionson:observe
: event.detail.isIntersecting
is a boolean
on:intersect
: event.detail.isIntersecting
can only be true
<IntersectionObserver
on:observe={(e) => {
console.log(e.detail.isIntersecting); // boolean
}}
on:intersect={(e) => {
console.log(e.detail.isIntersecting); // true
}}
/>
Published by metonym over 3 years ago
This is a patch release to refresh the documentation published to NPM/Yarn.
Documentation
on:observe
exampleon:observe
and on:intersect
IntersectionObserverEntry
interfaceonce
and intersecting
are more prominentPublished by metonym over 3 years ago
Features
rootMargin
changes (https://github.com/metonym/svelte-intersection-observer/pull/12, contributed by @dysfunc)Published by metonym over 3 years ago
Fixes
onMount
to work in hydration use cases (#13, contributed by @nosovk)Published by metonym over 3 years ago
Features
observer
prop (type IntersectionObserver
)isIntersecting
the viewportPublished by metonym almost 4 years ago
Features
Published by metonym almost 4 years ago
Features
intersecting
propFixes
entry
Documentation
Bind the intersecting
prop in the demo / Svelte REPL, which is more concise than binding to entry
<script>
import IntersectionObserver from "svelte-intersection-observer";
let element;
let intersecting;
</script>
<header>
<strong>Scroll down.</strong>
<div>
Element in view?
<strong class:intersecting>{intersecting ? 'Yes' : 'No'}</strong>
</div>
</header>
<IntersectionObserver {element} bind:intersecting>
<div bind:this={element}>
{#if intersecting}Element is in view{/if}
</div>
</IntersectionObserver>
Published by metonym almost 4 years ago
Features
entry
(IntersectionObserverEntry) as a reactive propThis allows for more concise code:
<IntersectionObserver {element} bind:entry>
<div class="element" bind:this="{element}">
{#if entry && entry.isIntersecting}
Element is in view
{/if}
</div>
</IntersectionObserver>
Published by metonym almost 4 years ago