add padding to offset scrollbar; fixes #1132

docs/resources/changelog.md

@@ -26,6 +26,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-spinner>` that caused the animation to stop working correctly in Safari [#1121](https://github.com/shoelace-style/shoelace/issues/1121)
 - Fixed a bug that prevented the entire `<sl-tab-panel>` to be hidden when inactive
 - Fixed a bug that caused the value of `<sl-radio-group>` to be `undefined` depending on where the radio was activated [#1134](https://github.com/shoelace-style/shoelace/issues/1134)
+- Fixed a bug that caused body content to shift when scroll locking was enabled [#1132](https://github.com/shoelace-style/shoelace/issues/1132)
 - Refactored the `ShoelaceFormControl` interface to remove the `invalid` property, allowing a more intuitive API for controlling validation internally
 - Renamed the internal `FormSubmitController` to `FormControlController` to better reflect what it's used for
 - Updated Lit to 2.6.1

src/internal/scroll.ts

@@ -2,13 +2,26 @@ import { getOffset } from './offset';
 
 const locks = new Set();
 
+/** Returns the width of the document's scrollbar */
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+
 /**
  * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
  * without premature unlocking.
  */
 export function lockBodyScrolling(lockingEl: HTMLElement) {
   locks.add(lockingEl);
-  document.body.classList.add('sl-scroll-lock');
+
+  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
+  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
+  if (!document.body.classList.contains('sl-scroll-lock')) {
+    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `sl-scroll-lock` class is applied
+    document.body.classList.add('sl-scroll-lock');
+    document.body.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`);
+  }
 }
 
 /**
@@ -19,6 +32,7 @@ export function unlockBodyScrolling(lockingEl: HTMLElement) {
 
   if (locks.size === 0) {
     document.body.classList.remove('sl-scroll-lock');
+    document.body.style.removeProperty('--sl-scrollbar-width');
   }
 }
 

src/themes/_utility.css

@@ -5,6 +5,7 @@
  */
 
 .sl-scroll-lock {
+  padding-right: var(--sl-scroll-lock-size) !important;
   overflow: hidden !important;
 }