@gka/svelte-scroller 3.0.0-pre1

package/LICENSE

@@ -0,0 +1,9 @@
+Copyright (c) 2018 Rich Harris
+
+Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions:
+
+This license, or a link to its text, must be included with all copies of the software and any derivative works.
+
+Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license.
+
+The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use.

package/README.md

@@ -0,0 +1,77 @@
+# svelte-scroller ([demo](https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6?version=3))
+
+The Svelte scroller we all love, but in Svelte 5!
+
+## Installation
+
+```bash
+yarn add @gka/svelte-scroller
+```
+
+## Usage
+
+```html
+<script>
+  import Scroller from "@gka/svelte-scroller";
+
+  let index, offset, progress;
+</script>
+
+<style>
+  section {
+    height: 80vh;
+  }
+</style>
+
+<Scroller top="{0.2}" bottom="{0.8}" bind:index bind:offset bind:progress>
+  {#snippet background()}
+    <p>
+      This is the background content. It will stay fixed in place while the
+      foreground scrolls over the top.
+    </p>
+
+    <p>Section {index + 1} is currently active.</p>
+  {/snippet}
+
+  {#snippet foreground()}
+    <section>This is the first section.</section>
+    <section>This is the second section.</section>
+    <section>This is the third section.</section>
+  {/snippet}
+</Scroller>
+```
+
+You must have one `background` snippet and one `foreground` snippet — see [Snippets and render tags](https://svelte.dev/tutorial/svelte/snippets-and-render-tags) for more info.
+
+## Parameters
+
+The following parameters are available:
+
+| parameter | default   | description                                                                                                                                                                                                         |
+| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| top       | 0         | The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height                                                                         |
+| bottom    | 1         | The inverse of `top` — once the bottom of the foreground passes this point, the background becomes unfixed                                                                                                          |
+| threshold | 0.5       | Once a section crosses this point, it becomes 'active'                                                                                                                                                              |
+| query     | 'section' | A CSS selector that describes the individual sections of your foreground                                                                                                                                            |
+| parallax  | false     | If `true`, the background will scroll such that the bottom edge reaches the `bottom` at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly |
+
+## `index`, `offset`, `progress` and `count`
+
+By binding to these properties, you can track the user's behaviour:
+
+- `index` — the currently active section
+- `offset` — how far the section has scrolled past the `threshold`, as a value between 0 and 1
+- `progress` — how far the foreground has travelled, where 0 is the top of the foreground crossing `top`, and 1 is the bottom crossing `bottom`
+- `count` — the number of sections
+
+You can rename them with e.g. `bind:index={i}`.
+
+## Configuring webpack
+
+If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component (`src/index.html`) rather than the compiled version (`index.mjs`) — this is more efficient.
+
+If you're using Rollup with [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.
+
+## License
+
+[LIL](LICENSE)

package/Scroller.svelte

@@ -0,0 +1,229 @@
+<script module>
+	const handlers = [];
+	let manager;
+
+	if (typeof window !== 'undefined') {
+		const run_all = () => handlers.forEach(fn => fn());
+
+		window.addEventListener('scroll', run_all);
+		window.addEventListener('resize', run_all);
+	}
+
+	if (typeof IntersectionObserver !== 'undefined') {
+		const map = new Map();
+
+		const observer = new IntersectionObserver((entries, observer) => {
+			entries.forEach(entry => {
+				const update = map.get(entry.target);
+				const index = handlers.indexOf(update);
+
+				if (entry.isIntersecting) {
+					if (index === -1) handlers.push(update);
+				} else {
+					update();
+					if (index !== -1) handlers.splice(index, 1);
+				}
+			});
+		}, {
+			rootMargin: '400px 0px' // TODO why 400?
+		});
+
+		manager = {
+			add: ({ outer, update }) => {
+				const { top, bottom } = outer.getBoundingClientRect();
+
+				if (top < window.innerHeight && bottom > 0) handlers.push(update);
+
+				map.set(outer, update);
+				observer.observe(outer);
+			},
+
+			remove: ({ outer, update }) => {
+				const index = handlers.indexOf(update);
+				if (index !== -1) handlers.splice(index, 1);
+
+				map.delete(outer);
+				observer.unobserve(outer);
+			}
+		};
+	} else {
+		manager = {
+			add: ({ update }) => {
+				handlers.push(update);
+			},
+
+			remove: ({ update }) => {
+				const index = handlers.indexOf(update);
+				if (index !== -1) handlers.splice(index, 1);
+			}
+		};
+	}
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	let {
+		// config
+		top = 0,
+		bottom = 1,
+		threshold = 0.5,
+		query = 'section',
+		parallax = false,
+		// snippets,
+		background: snippetBackground,
+		foreground: snippetForeground,
+		// bindings
+		index = $bindable(0),
+		count = $bindable(0),
+		offset = $bindable(0),
+		progress = $bindable(0),
+		visible = $bindable(false)
+	} = $props();
+
+	let outer = $state();
+	let foreground = $state();
+	let background = $state();
+	let left = $state();
+	let sections = $state([]);
+	let wh = $state(0);
+	let fixed = $state();
+	let offset_top = $state(0);
+	let width = $state(1);
+	let height = $state();
+	let inverted = $state();
+
+	const top_px = $derived(Math.round(top * wh));
+	const bottom_px = $derived(Math.round(bottom * wh));
+	const threshold_px = $derived(Math.round(threshold * wh));
+
+	$effect(() => (top, bottom, threshold, parallax, update()));
+
+	const style = $derived(`
+		position: ${fixed ? 'fixed' : 'absolute'};
+		top: 0;
+		transform: translate(0, ${offset_top}px);
+		z-index: ${inverted ? 3 : 1};
+	`);
+
+	const widthStyle = $derived(fixed ? `width:${width}px;` : '');
+
+	onMount(() => {
+		sections = foreground.querySelectorAll(query);
+		count = sections.length;
+
+		update();
+
+		const scroller = { outer, update };
+
+		manager.add(scroller);
+		return () => manager.remove(scroller);
+	});
+
+	function update() {
+		if (!foreground) return;
+
+		// re-measure outer container
+		const bcr = outer.getBoundingClientRect();
+		left = bcr.left;
+		width = bcr.right - left;
+
+		// determine fix state
+		const fg = foreground.getBoundingClientRect();
+		const bg = background.getBoundingClientRect();
+
+		visible = fg.top < wh && fg.bottom > 0;
+
+		const foreground_height = fg.bottom - fg.top;
+		const background_height = bg.bottom - bg.top;
+
+		const available_space = bottom_px - top_px;
+		progress = (top_px - fg.top) / (foreground_height - available_space);
+
+		if (progress <= 0) {
+			offset_top = 0;
+			fixed = false;
+		} else if (progress >= 1) {
+			offset_top = parallax
+				? (foreground_height - background_height)
+				: (foreground_height - available_space);
+			fixed = false;
+		} else {
+			offset_top = parallax ?
+				Math.round(top_px - progress * (background_height - available_space)) :
+				top_px;
+			fixed = true;
+		}
+
+		for (let i = 0; i < sections.length; i++) {
+			const section = sections[i];
+			const { top } = section.getBoundingClientRect();
+
+			const next = sections[i + 1];
+			const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
+
+			offset = (threshold_px - top) / (bottom - top);
+			if (bottom >= threshold_px) {
+				index = i;
+				break;
+			}
+		}
+	}
+</script>
+
+<svelte:window bind:innerHeight={wh}/>
+
+<svelte-scroller-outer bind:this={outer}>
+	<svelte-scroller-background-container class='background-container' style="{style}{widthStyle}">
+		<svelte-scroller-background bind:this={background}>
+			{@render snippetBackground()}
+		</svelte-scroller-background>
+	</svelte-scroller-background-container>
+
+	<svelte-scroller-foreground bind:this={foreground}>
+		{@render snippetForeground()}
+	</svelte-scroller-foreground>
+</svelte-scroller-outer>
+
+<style>
+	svelte-scroller-outer {
+		display: block;
+		position: relative;
+		pointer-events: none;
+	}
+
+	svelte-scroller-background {
+		display: block;
+		position: relative;
+		width: 100%;
+		pointer-events: all;
+	}
+
+	svelte-scroller-foreground {
+		display: block;
+		position: relative;
+		pointer-events: none;
+		z-index: 2;
+	}
+
+	svelte-scroller-foreground::after {
+		content: ' ';
+		display: block;
+		clear: both;
+	}
+
+	svelte-scroller-background-container {
+		display: block;
+		position: absolute;
+		width: 100%;
+		max-width: 100%;
+		pointer-events: none;
+		/* height: 100%; */
+
+		/* in theory this helps prevent jumping */
+		will-change: transform;
+		/* -webkit-transform: translate3d(0, 0, 0);
+		-moz-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0); */
+	}
+</style>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@gka/svelte-scroller",
+  "version": "3.0.0-pre1",
+  "description": "A <Scroller> component for Svelte apps",
+  "svelte": "Scroller.svelte",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm test"
+  },
+  "type": "module",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "jsdom": "^26.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  },
+  "repository": "https://github.com/gka/svelte-scroller",
+  "author": "Rich Harris",
+  "license": "LIL",
+  "keywords": [
+    "svelte"
+  ],
+  "files": [
+    "Scroller.svelte"
+  ],
+  "publishConfig": {
+    "tag": "next"
+  }
+}