Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix scrollbar detection #2121

Merged
merged 3 commits into from
Jul 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/pages/resources/changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
7 changes: 4 additions & 3 deletions src/internal/scroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Loading