ITADN

DropdownMenu scroll on hover misbehaves with scroll-padding

#2024Closedblt-r 创建于 2026-04-10
bug
B
blt-rcommented
### Describe the bug I put a dropdown menu in a sticky navbar with `preventScroll={false}`, then I also added a scroll-padding-top on `:root` as is often done. The code looks something like this: ```svelte <script lang="ts"> import { DropdownMenu } from 'bits-ui'; </script> <nav class="sticky top-0 mx-auto flex h-(--navbar-height) max-w-xl items-center bg-blue-50 px-5"> <DropdownMenu.Root> <DropdownMenu.Trigger class="bg-blue-200 px-4 py-2">Open Menu</DropdownMenu.Trigger> <DropdownMenu.Content preventScroll={false} class="border bg-white"> <DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 1</DropdownMenu.Item> <DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 2</DropdownMenu.Item> <DropdownMenu.Item class="px-4 py-2 hover:bg-gray-100">Item 3</DropdownMenu.Item> </DropdownMenu.Content> </DropdownMenu.Root> </nav> <main class="mx-auto max-w-xl space-y-6 p-10"> <!-- content here --> </main> <style> :global(:root) { --navbar-height: 5rem; scroll-padding-top: var(--navbar-height); } </style> ``` This results in viewport scrolling slightly up when hovering over items: https://github.com/user-attachments/assets/542a5c4e-7b93-4112-afe7-5dbc6cdf1329 To work around this I had to balance the padding by adding a negative scroll-margin (`-scroll-mt-(--navbar-height)`) on the `Content` and every `Item`. ### Reproduction https://stackblitz.com/edit/vp6mdsbf?file=src%2Froutes%2F%2Bpage.svelte ### Logs ```bash ``` ### System Info ```bash System: OS: Linux 6.19 Fedora Linux 43 (Workstation Edition) CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 4.98 GB / 15.52 GB Container: Yes Shell: 4.2.0 - /usr/bin/fish Binaries: Node: 24.13.0 - /home/blt/.local/share/nvm/v24.13.0/bin/node npm: 11.6.2 - /home/blt/.local/share/pnpm/npm pnpm: 10.30.2 - /home/blt/.local/share/pnpm/pnpm bun: 1.3.2 - /home/blt/.bun/bin/bun Deno: 2.6.8 - /home/blt/.deno/bin/deno Browsers: Firefox: 149.0 Firefox Developer Edition: 149.0 npmPackages: @sveltejs/kit: ^2.57.0 => 2.57.1 bits-ui: ^2.17.3 => 2.17.3 svelte: ^5.55.2 => 5.55.2 ``` ### Severity annoyance
关闭于 2026-05-03 1 条评论