From fb8534e9244cac5b0f3ecfc8ac55edf438cac74b Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 8 May 2026 15:22:18 +0200
Subject: [PATCH 1/3] Add missing type

---
 components/src/Scroller/Scroller.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index f6ed8daa..321fbf30 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { type Snippet } from 'svelte';
 	interface ScrollHandler {
 		(): void;
 	}

From 08f31c9d25a805c9f2d0ce63c28ed78298124f42 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 8 May 2026 15:43:49 +0200
Subject: [PATCH 2/3] Build out feature

---
 .../src/Scroller/Scroller.stories.svelte      | 39 ++++++++++++++++++-
 components/src/Scroller/Scroller.svelte       | 20 +++++++---
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index 5b274dbe..65030954 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -1,6 +1,6 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { expect } from 'storybook/test';
+	import { expect, fn } from 'storybook/test';
 
 	import Scroller from './Scroller.svelte';
 
@@ -23,7 +23,7 @@
 <Story
 	name="Default"
 	asChild
-	play={async ({ step, canvasElement }) => {
+	play={async ({ step, canvasElement, userEvent }) => {
 		await step('Verify state values are set', async () => {
 			expect(index).toBeGreaterThanOrEqual(0);
 			expect(offset).toBeGreaterThanOrEqual(0);
@@ -74,6 +74,7 @@
 				<p><code>index</code> / {index}</p>
 				<p><code>offset</code> / {offset}</p>
 				<p><code>progress</code> / {progress}</p>
+				<button>I'm not clickable</button>
 			{/snippet}
 
 			{#snippet foreground()}
@@ -87,6 +88,40 @@
 	</div>
 </Story>
 
+<Story
+	name="Enable background events"
+	asChild
+	play={async ({ step, canvasElement, userEvent }) => {
+		await step('Background button fires click event', async () => {
+			const handler = fn();
+			const button = canvasElement.querySelector('button');
+			expect(button).toBeDefined();
+			if (button) {
+				button.addEventListener('click', handler);
+				await userEvent.click(button);
+				expect(handler).toHaveBeenCalled();
+			}
+		});
+	}}
+>
+	<div>
+		<Scroller enableMouseEvents="background">
+			{#snippet background()}
+				<p>
+					This is the background content. It will stay fixed in place while the foreground scrolls
+					over the top.
+				</p>
+				<button>I'm clickable</button>
+			{/snippet}
+
+			{#snippet foreground()}
+				<section>This is the first section.</section>
+				<section>This is the second section.</section>
+			{/snippet}
+		</Scroller>
+	</div>
+</Story>
+
 <style>
 	section {
 		height: 25vh;
diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 321fbf30..3149b329 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -167,10 +167,14 @@
 		 * Whether the scroller is currently visible in the viewport (bindable)
 		 */
 		visible?: boolean;
+
+		/**
+		 * Whether background and/or foreground elements trigger mouse events
+		 */
+		enableMouseEvents?: 'background' | 'foreground' | 'all' | 'none';
 	}
 
 	let {
-		// Configuration props (read-only)
 		foreground = null,
 		background = null,
 		top = 0,
@@ -178,8 +182,7 @@
 		threshold = 0.5,
 		query = 'section',
 		parallax = false,
-
-		// Binding props (two-way binding)
+		enableMouseEvents = 'foreground',
 		index = $bindable(0),
 		count = $bindable(0),
 		offset = $bindable(0),
@@ -291,13 +294,19 @@
 <svelte:window bind:innerHeight={windowHeight} />
 
 <svelte-scroller-outer bind:this={outerWrapper}>
-	<svelte-scroller-background-container class="background-container">
+	<svelte-scroller-background-container
+		class="background-container"
+		style:pointer-events={['background', 'all'].includes(enableMouseEvents) ? 'all' : 'none'}
+	>
 		<svelte-scroller-background bind:this={backgroundWrapper} style={backgroundStyle}>
 			{@render background()}
 		</svelte-scroller-background>
 	</svelte-scroller-background-container>
 
-	<svelte-scroller-foreground bind:this={foregroundWrapper}>
+	<svelte-scroller-foreground
+		bind:this={foregroundWrapper}
+		style:pointer-events={['foreground', 'all'].includes(enableMouseEvents) ? 'all' : 'none'}
+	>
 		{@render foreground()}
 	</svelte-scroller-foreground>
 </svelte-scroller-outer>
@@ -334,7 +343,6 @@
 		width: 100%;
 		height: 100%;
 		max-width: 100%;
-		pointer-events: none;
 		will-change: transform;
 	}
 </style>

From 9d47702fe763eae25aca52dbe1d0b635ab4b99b8 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 8 May 2026 15:45:37 +0200
Subject: [PATCH 3/3] shorten prop name

---
 components/src/Scroller/Scroller.stories.svelte | 2 +-
 components/src/Scroller/Scroller.svelte         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index 65030954..d824e371 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -105,7 +105,7 @@
 	}}
 >
 	<div>
-		<Scroller enableMouseEvents="background">
+		<Scroller interactive="background">
 			{#snippet background()}
 				<p>
 					This is the background content. It will stay fixed in place while the foreground scrolls
diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 3149b329..77d8648d 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -171,7 +171,7 @@
 		/**
 		 * Whether background and/or foreground elements trigger mouse events
 		 */
-		enableMouseEvents?: 'background' | 'foreground' | 'all' | 'none';
+		interactive?: 'background' | 'foreground' | 'both' | 'none';
 	}
 
 	let {
@@ -182,7 +182,7 @@
 		threshold = 0.5,
 		query = 'section',
 		parallax = false,
-		enableMouseEvents = 'foreground',
+		interactive = 'foreground',
 		index = $bindable(0),
 		count = $bindable(0),
 		offset = $bindable(0),
@@ -296,7 +296,7 @@
 <svelte-scroller-outer bind:this={outerWrapper}>
 	<svelte-scroller-background-container
 		class="background-container"
-		style:pointer-events={['background', 'all'].includes(enableMouseEvents) ? 'all' : 'none'}
+		style:pointer-events={['background', 'both'].includes(interactive) ? 'all' : 'none'}
 	>
 		<svelte-scroller-background bind:this={backgroundWrapper} style={backgroundStyle}>
 			{@render background()}
@@ -305,7 +305,7 @@
 
 	<svelte-scroller-foreground
 		bind:this={foregroundWrapper}
-		style:pointer-events={['foreground', 'all'].includes(enableMouseEvents) ? 'all' : 'none'}
+		style:pointer-events={['foreground', 'both'].includes(interactive) ? 'all' : 'none'}
 	>
 		{@render foreground()}
 	</svelte-scroller-foreground>