From 3a5380e421953635e023ad4e1128e44bc978ea4f Mon Sep 17 00:00:00 2001
From: jer3m01 <jer3m01@jer3m01.com>
Date: Tue, 21 Jul 2026 07:55:33 +0200
Subject: [PATCH 1/2] fix: prevent scroll on document to keep sticky elements

---
 packages/solid-prevent-scroll/README.md          |  2 +-
 .../solid-prevent-scroll/src/preventScroll.ts    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/solid-prevent-scroll/README.md b/packages/solid-prevent-scroll/README.md
index 1cdb40bb..f5935dd8 100644
--- a/packages/solid-prevent-scroll/README.md
+++ b/packages/solid-prevent-scroll/README.md
@@ -11,7 +11,7 @@ SolidJS utility that prevents scrolling outside of a given DOM element. Works by
 
 - Supports nested scroll containers
 - Works both vertically and horizontally
-- Removes the body scrollbar without layout shift
+- Removes the document scrollbar without layout shift
 
 ## Usage
 
diff --git a/packages/solid-prevent-scroll/src/preventScroll.ts b/packages/solid-prevent-scroll/src/preventScroll.ts
index eeb2445c..d410570f 100644
--- a/packages/solid-prevent-scroll/src/preventScroll.ts
+++ b/packages/solid-prevent-scroll/src/preventScroll.ts
@@ -27,8 +27,8 @@ const isActive = (id: string) =>
  *
  * @param props.element - Prevent scroll outside of this element. If the element is `null`, scroll will be prevented on the whole page. *Default = `null`*
  * @param props.enabled - Whether scroll should be prevented. *Default = `true`*
- * @param props.hideScrollbar - Whether the scrollbar of the `<body>` element should be hidden. *Default = `true`*
- * @param props.preventScrollbarShift - Whether padding should be added to the `<body>` element to avoid layout shift. *Default = `true`*
+ * @param props.hideScrollbar - Whether the scrollbar of the document element should be hidden. *Default = `true`*
+ * @param props.preventScrollbarShift - Whether padding should be added to the document element to avoid layout shift. *Default = `true`*
  * @param props.preventScrollbarShiftMode - Whether padding or margin should be used to avoid layout shift. *Default = `'padding'`*
  * @param props.restoreScrollPosition - Whether to restore the `<body>` scroll position with `window.scrollTo` to avoid possible layout shift after disabling the utility. *Default = `true`*
  * @param props.allowPinchZoom - Whether pinch zoom should be allowed. *Default = `false`*
@@ -80,9 +80,9 @@ const createPreventScroll = (props: {
     )
       return
 
-    const { body } = document
+    const { documentElement } = document
 
-    const scrollbarWidth = window.innerWidth - body.offsetWidth
+    const scrollbarWidth = window.innerWidth - documentElement.clientWidth
 
     if (access(defaultedProps.preventScrollbarShift)) {
       const style: Partial<CSSStyleDeclaration> = { overflow: 'hidden' }
@@ -91,11 +91,11 @@ const createPreventScroll = (props: {
       if (scrollbarWidth > 0) {
         if (access(defaultedProps.preventScrollbarShiftMode) === 'padding') {
           style.paddingRight = `calc(${
-            window.getComputedStyle(body).paddingRight
+            window.getComputedStyle(documentElement).paddingRight
           } + ${scrollbarWidth}px)`
         } else {
           style.marginRight = `calc(${
-            window.getComputedStyle(body).marginRight
+            window.getComputedStyle(documentElement).marginRight
           } + ${scrollbarWidth}px)`
         }
 
@@ -110,7 +110,7 @@ const createPreventScroll = (props: {
 
       createStyle({
         key: 'prevent-scroll',
-        element: body,
+        element: documentElement,
         style,
         properties,
         cleanup: () => {
@@ -125,7 +125,7 @@ const createPreventScroll = (props: {
     } else {
       createStyle({
         key: 'prevent-scroll',
-        element: body,
+        element: documentElement,
         style: {
           overflow: 'hidden',
         },

From cbdddabb7ab9f35fe2ace01f2efb4d43e352a8df Mon Sep 17 00:00:00 2001
From: jer3m01 <jer3m01@jer3m01.com>
Date: Tue, 21 Jul 2026 08:06:05 +0200
Subject: [PATCH 2/2] docs: update prevent scroll

---
 web/src/pages/docs/utilities/prevent-scroll.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/docs/utilities/prevent-scroll.mdx b/web/src/pages/docs/utilities/prevent-scroll.mdx
index 1b489662..ffbb020f 100644
--- a/web/src/pages/docs/utilities/prevent-scroll.mdx
+++ b/web/src/pages/docs/utilities/prevent-scroll.mdx
@@ -23,7 +23,7 @@ Utility that prevents scrolling outside of a given DOM element. Works by prevent
 <Features features={[
   'Supports nested scroll containers',
   'Works both vertically and horizontally',
-  'Removes the body scrollbar without layout shift',
+  'Removes the document scrollbar without layout shift',
 ]} />
 
 ## Installation
@@ -34,9 +34,9 @@ Utility that prevents scrolling outside of a given DOM element. Works by prevent
 
 ## Usage
 
-By default, it also hides the scrollbar of the body element and adds padding to it to prevent the page from jumping. This behavior can be disabled and modified with the `hideScrollbar`, `preventScrollbarShift`, and `preventScrollbarShiftMode` props.
+By default, it also hides the scrollbar of the document element and adds padding to it to prevent the page from jumping. This behavior can be disabled and modified with the `hideScrollbar`, `preventScrollbarShift`, and `preventScrollbarShiftMode` props.
 
-It also adds the CSS variable `--scrollbar-width` to the body element, indicating the width of the currently removed scrollbar. You can use this variable to add padding to fixed elements, like a topbar.
+It also adds the CSS variable `--scrollbar-width` to the document element, indicating the width of the currently removed scrollbar. You can use this variable to add padding to fixed elements, like a topbar.
 
 <Code code={`
   import createPreventScroll from 'solid-prevent-scroll'