hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-12 13:18:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lock page scroll while a modal dialog is open (#214)

Browse Source 
Pure CSS: html:has(<dialog>:modal) gets overflow: hidden. A scroll
timeline sets scrollbar-gutter: stable only when the page can scroll,
so the layout doesn't shift.

Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
This commit is contained in:
Grug
2026-10-23 14:52:09 +08:00
committed by GitHub
co-authored by grugbraindev
parent 33a255b499
commit a834708080
2 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/components/dialog.css
+14
View File
@@ -1,5 +1,19 @@
/* Dialog */
@keyframes dialog-scroll-lock {
from, to {
scrollbar-gutter: stable;
}
}
@layer components {
/* Lock page scroll while a modal dialog is open. The scroll timeline only
reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
overflow: hidden;
animation: dialog-scroll-lock linear both;
animation-timeline: scroll(self);
}
.dialog,
.alert-dialog {
@apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;