fix scrollbar detection (#2121)

* fix scrollbar detection

* add pull #

* prettier

docs/pages/resources/changelog.md

@@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added the `base__popup` part to `<sl-dropdown>` [#2078]
 - `<sl-tab>` `closable` property now reflects. [#2041]
 - `<sl-tab-group>` now implements a proper "roving tabindex" and `<sl-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs. [#2041]
+- Fixed a bug in `<sl-details>` / `<sl-drawer>` that was accidentally detecting overflows and showing a scrollbar. [#2121]
 - Fixed a bug in the submenu controller that prevented submenus from rendering in RTL without explicitly setting `dir` on the parent menu item [#1992]
 - Fixed a bug where `<sl-relative-time>` would announce the full time instead of the relative time in screen readers
 - When calling `customElements.define` we no longer register with anonymous classes by default [#2079]

src/internal/scroll.ts

@@ -41,9 +41,10 @@ export function lockBodyScrolling(lockingEl: HTMLElement) {
       scrollbarGutterProperty = 'stable';
     }
 
-    if (scrollbarWidth <= 0) {
-      // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
-      scrollbarGutterProperty = 'revert';
+    /** Sometimes the scrollbar width is 1px, even then, we assume nothing is overflowing. */
+    if (scrollbarWidth < 2) {
+      // if there's no scrollbar, just set it to an empty string so whatever the user has set gets used. This is useful if the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
+      scrollbarGutterProperty = '';
     }
     document.documentElement.style.setProperty('--sl-scroll-lock-gutter', scrollbarGutterProperty);
     document.documentElement.classList.add('sl-scroll-lock');