diff options
| author | Matteo Manfredi | 2023-09-20 11:13:54 +0200 |
|---|---|---|
| committer | GitHub | 2023-09-20 11:13:54 +0200 |
| commit | e7261559f2539a0ceefd36a28e4fbbc17f5970b8 (patch) | |
| tree | eca94dac24476915295906bd99e5bcb50c3408f1 | |
| parent | 8b6bb875b8e53b4dc4b01fc940d2c2e53d83376f (diff) | |
| download | IT.starlight-e7261559f2539a0ceefd36a28e4fbbc17f5970b8.tar.gz IT.starlight-e7261559f2539a0ceefd36a28e4fbbc17f5970b8.tar.bz2 IT.starlight-e7261559f2539a0ceefd36a28e4fbbc17f5970b8.zip | |
Prevent scroll on `body` when search is open (#715)
Co-authored-by: Kevin Zuniga Cuellar <kzunigac@uvm.edu>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
| -rw-r--r-- | .changeset/soft-steaks-kick.md | 5 | ||||
| -rw-r--r-- | packages/starlight/components/Search.astro | 15 |
2 files changed, 16 insertions, 4 deletions
diff --git a/.changeset/soft-steaks-kick.md b/.changeset/soft-steaks-kick.md new file mode 100644 index 00000000..402f7fa5 --- /dev/null +++ b/.changeset/soft-steaks-kick.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +feat: prevent scroll on body when search is open diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro index f3fab2ba..05470756 100644 --- a/packages/starlight/components/Search.astro +++ b/packages/starlight/components/Search.astro @@ -72,20 +72,23 @@ const pagefindTranslations = { const openModal = (event?: MouseEvent) => { dialog.showModal(); + document.body.toggleAttribute('data-search-modal-open', true); this.querySelector('input')?.focus(); event?.stopPropagation(); window.addEventListener('click', onClick); }; - const closeModal = () => { - dialog.close(); - window.removeEventListener('click', onClick); - }; + const closeModal = () => dialog.close(); openBtn.addEventListener('click', openModal); openBtn.disabled = false; closeBtn.addEventListener('click', closeModal); + dialog.addEventListener('close', () => { + document.body.toggleAttribute('data-search-modal-open', false); + window.removeEventListener('click', onClick); + }); + // Listen for `/` and `cmd + k` keyboard shortcuts. window.addEventListener('keydown', (e) => { const isInput = @@ -230,6 +233,10 @@ const pagefindTranslations = { </style> <style is:global> + [data-search-modal-open] { + overflow: hidden; + } + #starlight__search { --sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale)); --sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale)); |