working: scrollbar removal - before attempting to disablePreventScroll

packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte

@@ -14,6 +14,7 @@
 		onInteractOutside = noop,
 		onFocusOutside = noop,
 		children,
+		preventScroll = false,
 		...restProps
 	}: WithChildren<WithoutChildrenOrChild<ContentProps>> = $props();
 
@@ -30,7 +31,7 @@
 
 <DialogPrimitive.Content
 	{...mergedProps}
-	preventScroll={false}
+	{preventScroll}
 	onMountAutoFocus={(e) => {
 		onMountAutoFocus(e);
 		if (e.defaultPrevented) return;

packages/vaul-svelte/src/lib/position-fixed.svelte.ts

@@ -1,3 +1,4 @@
+import { useId } from "bits-ui";
 import { onMount, untrack } from "svelte";
 import {
 	type ReadableBoxedValues,
@@ -22,6 +23,18 @@ function getActiveUrl() {
 	return typeof window !== "undefined" ? window.location.href : "";
 }
 
+class Counter {
+	value = 0;
+
+	constructor(initialValue: number = 0) {
+		this.value = initialValue;
+	}
+}
+
+const count = new Counter(0);
+
+let firstPositionFixedId: number = 0;
+
 export class PositionFixed {
 	#open: PositionFixedProps["open"];
 	#modal: PositionFixedProps["modal"];
@@ -31,6 +44,7 @@ export class PositionFixed {
 	#noBodyStyles: PositionFixedProps["noBodyStyles"];
 	#activeUrl = $state(getActiveUrl());
 	#scrollPos = $state(0);
+	#id = generateId();
 
 	constructor(props: PositionFixedProps) {
 		this.#open = props.open;
@@ -66,6 +80,7 @@ export class PositionFixed {
 				// This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
 				if (open) {
 					const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
+
 					!isStandalone && this.#setPositionFixed();
 
 					if (!modal) {
@@ -86,13 +101,25 @@ export class PositionFixed {
 
 	#setPositionFixed = () => {
 		// If previousBodyPosition is already set, don't set it again.
-		if (previousBodyPosition === null && this.#open.current && !this.#noBodyStyles.current) {
+		if (
+			previousBodyPosition === null &&
+			this.#open.current &&
+			!this.#noBodyStyles.current &&
+			(firstPositionFixedId === 0 || firstPositionFixedId === this.#id)
+		) {
+			firstPositionFixedId = this.#id;
+			const win = document.defaultView ?? window;
+
+			const { documentElement } = document;
+			const scrollbarWidth = win.innerWidth - documentElement.clientWidth;
+
 			previousBodyPosition = {
 				position: document.body.style.position,
 				top: document.body.style.top,
 				left: document.body.style.left,
 				height: document.body.style.height,
 				right: "unset",
+				paddingRight: document.body.style.paddingRight,
 			};
 
 			// Update the dom inside an animation frame
@@ -104,6 +131,7 @@ export class PositionFixed {
 				left: `${-scrollX}px`,
 				right: "0px",
 				height: "auto",
+				paddingRight: `${scrollbarWidth}px`,
 			});
 
 			window.setTimeout(
@@ -122,7 +150,11 @@ export class PositionFixed {
 	};
 
 	restorePositionSetting = () => {
-		if (previousBodyPosition !== null && !this.#noBodyStyles.current) {
+		if (
+			previousBodyPosition !== null &&
+			!this.#noBodyStyles.current &&
+			firstPositionFixedId === this.#id
+		) {
 			// Convert the position from "px" to Int
 			const y = -Number.parseInt(document.body.style.top, 10);
 			const x = -Number.parseInt(document.body.style.left, 10);
@@ -146,3 +178,10 @@ export class PositionFixed {
 		}
 	};
 }
+
+/**
+ * Generates a unique ID based on a global counter.
+ */
+function generateId() {
+	return count.value++;
+}

packages/vaul-svelte/src/lib/prevent-scroll.svelte.ts

@@ -117,20 +117,12 @@ export function usePreventScroll({ isDisabled }: PreventScrollOptions) {
 // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
 // add some padding to prevent the page from shifting when the scrollbar is hidden.
 function preventScrollStandard() {
-	if (typeof document === "undefined") return () => {};
-	const win = document.defaultView ?? window;
-
-	const { documentElement, body } = document;
-	const scrollbarWidth = win.innerWidth - documentElement.clientWidth;
-	const setScrollbarWidthProperty = () =>
-		setCSSProperty(documentElement, "--scrollbar-width", `${scrollbarWidth}px`);
-	const paddingProperty = getPaddingProperty(documentElement);
-	const scrollbarSidePadding = win.getComputedStyle(body)[paddingProperty];
-
 	return chain(
-		setScrollbarWidthProperty(),
-		setStyle(body, paddingProperty, `calc(${scrollbarSidePadding} + ${scrollbarWidth}px)`),
-		setStyle(body, "overflow", "hidden")
+		setStyle(
+			document.documentElement,
+			"paddingRight",
+			`${window.innerWidth - document.documentElement.clientWidth}px`
+		)
 	);
 }
 

packages/vaul-svelte/src/lib/vaul.svelte.ts

@@ -257,10 +257,11 @@ class DrawerRootState {
 		$effect(() => {
 			const open = this.open.current;
 			if (!open) return;
+
 			untrack(() => {
-				setStyles(document.documentElement, {
-					scrollBehavior: "auto",
-				});
+				// setStyles(document.documentElement, {
+				// 	scrollBehavior: "auto",
+				// });
 
 				this.openTime = new Date();
 				this.scaleBackground(true);
@@ -287,17 +288,17 @@ class DrawerRootState {
 			});
 		});
 
-		usePreventScroll({
-			isDisabled: box.with(
-				() =>
-					!this.open.current ||
-					this.isDragging ||
-					!this.modal.current ||
-					this.justReleased ||
-					!this.hasBeenOpened ||
-					this.disablePreventScroll.current
-			),
-		});
+		// usePreventScroll({
+		// 	isDisabled: box.with(
+		// 		() =>
+		// 			!this.open.current ||
+		// 			this.isDragging ||
+		// 			!this.modal.current ||
+		// 			this.justReleased ||
+		// 			!this.hasBeenOpened ||
+		// 			this.disablePreventScroll.current
+		// 	),
+		// });
 
 		$effect(() => {
 			return () => {
@@ -749,7 +750,7 @@ class DrawerRootState {
 
 			setStyles(wrapper, {
 				borderRadius: `${BORDER_RADIUS}px`,
-				overflow: "hidden",
+				// overflow: "hidden",
 				...(isVertical(this.direction.current)
 					? {
 							transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,

sites/docs/src/app.html

@@ -8,7 +8,7 @@
 	</head>
 	<body
 		data-sveltekit-preload-data="hover"
-		class="min-h-[4000px] bg-gray-50 text-gray-900 antialiased"
+		class="h-[4000px] min-h-[4000px] overflow-y-auto bg-gray-50 text-gray-900 antialiased"
 	>
 		<div>%sveltekit.body%</div>
 	</body>

sites/docs/src/app.pcss

@@ -10,7 +10,7 @@
 
 html,
 body {
-	overflow: hidden;
+	/* overflow: hidden; */
 }
 
 body,