From 1cf340b22e9b7f292c2fbd6fb52d2df0307b7f8e Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 23 Jul 2024 12:45:08 -0400 Subject: [PATCH] fix scrollbar detection (#2121) * fix scrollbar detection * add pull # * prettier --- docs/pages/resources/changelog.md | 1 + src/internal/scroll.ts | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 8569299a..9d89e8e0 100644 --- a/docs/pages/resources/changelog.md +++ b/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 `` [#2078] - `` `closable` property now reflects. [#2041] - `` now implements a proper "roving tabindex" and `` is no longer tabbable by default. This aligns closer to the APG pattern for tabs. [#2041] +- Fixed a bug in `` / `` 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 `` 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] diff --git a/src/internal/scroll.ts b/src/internal/scroll.ts index 3cca1b54..2d0995a3 100644 --- a/src/internal/scroll.ts +++ b/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');