Svelte Intersection Tracker

By using the Intersection Observer API this Svelte Component(set) enables tracking of the following options

• isIntersecting
• percentage - Math.max(% visible of element, % element is taking up of viewport)
• current - elements with the highest percentage

Demo

https://corrl.github.io/svelte-intersection-tracker/

:exclamation: NOTICE
The component uses entry.rootBounds which seems to be unavailable when sandboxed, so unfortunately it's not possible to make an example in the REPL

Installation

1npm i svelte-intersection-tracker

Usage

Structure

1import {IntersectionTracker, IntersectionTrackerLink, IntersectionTrackerItem} from 'svelte-intersection-tracker'
2
3<IntersectionTracker options={{...}}>
4    ...
5
6    <IntersectionTrackerLink id={data.id}
7                             let:isIntersecting
8                             let:percentage
9                             let:current>
10        ...
11    </IntersectionTrackerLink>
12
13    ...
14
15    <IntersectionTrackerItem id={data.id}
16                             let:isIntersecting
17                             let:percentage
18                             let:current>
19        ...
20    </IntersectionTrackerItem>
21
22    ...
23
24</IntersectionTracker>

Example

1import {IntersectionTracker, IntersectionTrackerLink, IntersectionTrackerItem} from 'svelte-intersection-tracker'
2
3<IntersectionTracker>
4
5    <ul>
6        {#each data as d}
7        <IntersectionTrackerLink id={d.id}
8                                 let:current
9        >
10            <li class:current-link={current}>
11                <a href="#{d.id}">
12                    {d.title}
13                </a>
14            </li>
15        </IntersectionTrackerLink>
16        {/each}
17    </ul>
18
19    <div id="items">
20        {#each data as d}
21        <IntersectionTrackerItem id={d.id}
22                                 let:current
23        >
24            <div class="item"
25                 class:current-item={current}
26            >
27                <h1>
28                    {d.title}
29                </h1>
30                <p>
31                    {d.content}
32                </p>
33            </div>
34        </IntersectionTrackerItem>
35        {/each}
36    </div>
37
38</IntersectionTracker>

API

Props <IntersectionTracker>

Name	Type	Default	Description	Required
options.root	HTMLElement| string	window	Either reference to element or id as string. The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.	false
options.rootMargin	string	0px	Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). MDN	false
options.fineness	number	100	Based on fineness an array for options.thresholdis generated, see examples below	false
options.threshold	number | number[]	[0, 0.01, 0.02, 0.03, ..., 0.97, 0.98, 0.99, 1]	Overwrites fineness if provided. Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. MDN	false

fineness	threshold
5	[0, 0.2, 0.4, 0.6, 0.8, 1]
10	[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
100 (default)	[0, 0.01, 0.02, 0.03, 0.04, 0.05, ..., 0.95, 0.96, 0.97, 0.98, 0.99, 1]

Props <IntersectionTrackerLink>/<IntersectionTrackerItem>

Name	Type	Default	Description	Required
id	string	-	Tracked items will be wrapped in a div with the provided id stylable via .svelte-intersection-tracker-item	true
group	number	0	By defining groups items can be watched seperately e.g. for tracking subsections	false

let:props

	Type	Default	Description
let:isIntersecting	boolean	false	Is true if the target element intersects with the intersection observer's root
let:percentage	number	0	Value between 0 and 1 representing the higher value of either the visible percentage of the elements area or the percentage the element is taking up of the viewport 0.2 => Either 20% of element visible or element fills 20% of viewport
let:current	boolean	false	True if element has highest percentage in own group. May be true for multiple elements if they share the same percentage, e.g. 1 when 100% visible.

Examples

1
2<IntersectionTrackerLink
3        id={d.id}
4        let:percentage
5>
6    <li
7            style:font-weight="{400+400*percentage}"
8            style:font-size="{1+.4*percentage}rem"
9    >
10        <a href="#{d.id}">
11            {d.title}
12        </a>
13    </li>
14</IntersectionTrackerLink>

1
2<IntersectionTrackerItem
3        id={d.id}
4        let:percentage
5>
6    <div class="item"
7         style:background="rgba(255,255,255,{percentage})"
8         style:box-shadow="{4*percentage}px {4*percentage}px {20*percentage+10}px {5*percentage}px rgba(113,127,132,{percentage*.4})"
9    >
10        ...
11    </div>
12</IntersectionTrackerItem>

1
2<IntersectionTrackerLink
3        id={d.id}
4        let:percentage
5        let:current
6>
7    <li
8            style:color="hsl({percentage*70+155}, 50%, 50%)"
9    >
10        <div class="link-marker"
11             class:current-link={current}
12        >
13            ★
14        </div>
15        <a href="#{d.id}">{d.title}</a>
16    </li>
17</IntersectionTrackerLink>