When the drawer is closed, the scroll position undesirably jumps to the top of the page and then back again

[yoannakr]

When the drawer is closed, the scroll position undesirably jumps to the top of the page and then back again

https://github.com/shadcn-ui/ui/assets/55032687/ec4af7be-5a19-4840-8879-e7e3cec87829

[useit015]

facing the same issue here

[broisnischal]

I guess it is supposed to take the window height rather than the full page?

[begalinsaf]

https://github.com/shadcn-ui/ui/assets/145198186/f817cb37-f2b1-4f1b-bc50-d1cb0c2fdfba

same issue

[begalinsaf]

I think I found a solution, the problem is scroll-behavior: smooth from html class css attribute I just removed scroll-behavior: smooth or scroll-smooth from the html.

https://github.com/shadcn-ui/ui/assets/145198186/4b6b10e4-79d8-4929-8fde-dd13fa05d6f6

[fluid-design-io]

I think I found a solution, the problem is scroll-behavior: smooth from html class css attribute I just removed scroll-behavior: smooth or scroll-smooth from the html.

Video.tanpa.judul.Dibuat.dengan.Clipchamp.mp4

@begalinsaf Yes, it seems to do the trick, I still want to preserve the smooth scroll behavior on my site so I added a simple hook to fix this issue:

// use-scroll-behavior.tsx
import { useEffect } from 'react'

function useScrollBehavior(isOpen: boolean) {
  useEffect(() => {
    if (isOpen) {
      document.documentElement.style.scrollBehavior = 'auto'
    } else {
      setTimeout(() => {
        document.documentElement.style.scrollBehavior = 'smooth'
      }, 1000)
    }
  }, [isOpen])
}

export default useScrollBehavior

To use it:

//...
const [open, setOpen] = useState(false)
// Add this line below
useScrollBehavior(open)
return (
<Drawer open={open} onOpenChange={setOpen}>
  <DrawerTrigger asChild>
    <Button variant="outline">Button</Button>
  </DrawerTrigger>
  <DrawerContent>
    {/* ... */}
  </DrawerContent>
</Drawer>
)
}

[felipemenezes98]

I had the same issue and fixed it by setting document.documentElement.style.scrollBehavior to 'auto' when the drawer is open, and back to 'smooth' after a 400ms timeout when it closes. This short delay prevents unwanted scroll to the top on rapid interactions.

[yoannakr]

It looks like the issue was caused by vaul Take a look here: vaul/issue

[albertocubeddu]

The same is happening on the "Sheet" component.

[vitormarkis]

The same is happening on the "Sheet" component.

Try updating vaul dependency, the issue is already closed and it was the solution for me at the time

[hedysnike]

can anyone post code ?

[maytees]

The scroll-behavior: smooth property was the issue for me, i just got around it by using responsive breakpoints, so mobile wont have smooth behavior. Very annoying issue with radix ui..