Merge pull request #99 from Digital-Alchemy-TS/preventIframeScroll

prevent app from bounce scrolling when in an iFrame

Author: chrisdrackett

apps/client/src/main.tsx

@@ -3,11 +3,18 @@ import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import "unfonts.css"
 
+import { preventBounceScroll } from "@code-glue/paradigm"
 import { Frame } from "@/pages/Frame/Frame"
 
 // init the editor
 import "@/components/Editor/init"
 
+// Prevent bounce scrolling on document while allowing internal scroll
+const cleanupBounceScroll = preventBounceScroll()
+
+// Ensure bounce scroll listeners are cleaned up when the page unloads
+window.addEventListener("unload", cleanupBounceScroll)
+// Make sure we have a root element to mount the app
 const rootElement = document.getElementById("root")
 if (!rootElement) {
 	throw new Error('Root element with id "root" not found')

packages/paradigm/package.json

@@ -3,6 +3,11 @@
 	"private": true,
 	"type": "module",
 	"version": "0.0.1",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
 	"scripts": {
 		"start": "storybook dev -p 6006 --no-open --quiet",
 		"storybook:build": "storybook build",

packages/paradigm/src/components/List/Header/index.tsx

@@ -11,10 +11,10 @@ export type ListHeaderProps = {
 	 * Set to true if being rendered in a section list or anything else that has headers stick to the top of the list.
 	 * TODO Use this to set a blur on the wrapping View (Row)
 	 */
-	isSticky?: boolean
+	// isSticky?: boolean
 }
 
-export const Header = ({ children, isSticky }: ListHeaderProps) => {
+export const Header = ({ children }: ListHeaderProps) => {
 	return (
 		<Row
 			noShrink

packages/paradigm/src/index.ts

@@ -23,6 +23,7 @@ export * from "./components/View"
 
 export * from "./utils/platform"
 export * from "./utils/pluralize"
+export * from "./utils/preventBounceScroll"
 
 // etc
 

packages/paradigm/src/utils/preventBounceScroll.ts

@@ -0,0 +1,73 @@
+/**
+ * Prevents scroll events from escaping the given root (e.g., your app wrapper) into the host page/iframe parent.
+ * It stops propagation on wheel/touchmove at the root and only preventsDefault when attempting to scroll past edges.
+ * Returns a cleanup function to remove listeners.
+ */
+export function preventBounceScroll(): () => void {
+	const touchStartYById = new Map<number, number>()
+
+	const isAtEdge = (el: HTMLElement, delta: number): boolean => {
+		const atTop = el.scrollTop <= 0
+		const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
+		const scrollingDown = delta > 0
+		const scrollingUp = delta < 0
+		return (atTop && scrollingUp) || (atBottom && scrollingDown)
+	}
+
+	const onWheel = (e: WheelEvent): void => {
+		// Keep the event inside the iframe/root
+		e.stopPropagation()
+		if (isAtEdge(document.documentElement, e.deltaY)) {
+			e.preventDefault()
+		}
+	}
+
+	const onTouchStart = (e: TouchEvent): void => {
+		if (e.touches.length > 0) {
+			const touch = e.touches[0]
+			if (touch) {
+				touchStartYById.set(touch.identifier, touch.clientY)
+			}
+		}
+	}
+
+	const onTouchMove = (e: TouchEvent): void => {
+		if (e.touches.length === 0) return
+		const touch = e.touches[0]
+		if (!touch) return
+		const startY = touchStartYById.get(touch.identifier) ?? touch.clientY
+		const deltaY = startY - touch.clientY // positive when moving up
+
+		// Keep the event inside the iframe/root
+		e.stopPropagation()
+		if (isAtEdge(document.documentElement, deltaY)) {
+			e.preventDefault()
+		}
+	}
+
+	document.documentElement.addEventListener("wheel", onWheel, {
+		passive: false,
+		capture: true,
+	})
+	document.documentElement.addEventListener("touchstart", onTouchStart, {
+		passive: true,
+		capture: true,
+	})
+	document.documentElement.addEventListener("touchmove", onTouchMove, {
+		passive: false,
+		capture: true,
+	})
+
+	return () => {
+		document.documentElement.removeEventListener("wheel", onWheel, {
+			capture: true,
+		} as EventListenerOptions)
+		document.documentElement.removeEventListener("touchstart", onTouchStart, {
+			capture: true,
+		} as EventListenerOptions)
+		document.documentElement.removeEventListener("touchmove", onTouchMove, {
+			capture: true,
+		} as EventListenerOptions)
+		touchStartYById.clear()
+	}
+}