Opening a drawer scrolls to the top again

[mjxwb]

This is the same issue in #55, but the fix for it seems to have broken. Here is the bug again in the v0.7.5:
https://codesandbox.io/p/sandbox/drawer-scrolls-to-top-8lpqx9

[emilkowalski]

I can't reproduce this on Safari iOS 17. Can you provide reproduction instructions and which device you are using?

[DennieMello]

I can't reproduce this on Safari iOS 17. Can you provide reproduction instructions and which device you are using?

I also encountered the problem of page scrolling up in my projects.

How to play:

I'm using next js 14 with an app router, the drawer is located in the layout and accordingly is initialized only once.

When I open the first page of the site and open the drawer, it does not scroll to the top, but if I then go to another page of the site and open the drawer, after closing it, the page scrolls to the top.

This is due to the fact that the drawer is initialized once and in the file use-position-fixed.ts the address of the page during initialization is written in the activeUrl, but when I go to another page, the activeUrl does not update and when I open the drawer, this code is executed, blocking scroll up.

       if (activeUrl !== window.location.href) {
          setActiveUrl(window.location.href);
          return;
        }

For myself, I solved the problem by adding

  const pathname = usePathname();

  React.useEffect(() => {
    if (!isOpen) {
      setActiveUrl(window.location.href);
    }
  }, [pathname, isOpen]);

I don’t know if this requires any changes, but just in case I described the problem I encountered =)

[dsbrianwebster]

Im actually experiencing this unwanted behavior on closing the drawer. The scroll position is undesirably jumping to the top of the page.

[dsbrianwebster]

Best I can do to prevent this and "keep" scroll position was double up the notion of scroll restoration...

const searchParams = useSearchParams();
const modal = searchParams.get('modal');
  
<Drawer
  open={!!modal}
  onClose={() => {
    drawerRestorePosition.current = document.body.style.getPropertyValue('top');
  }}
  onOpenChange={(open) => {
    if (!open) {
      requestAnimationFrame(() => {
        window.scrollTo(0, -parseInt(drawerRestorePosition.current, 10));
      });

      router.replace('/', { scroll: false });
    }
  }}
>
  <DrawerContent>
    {/* ... */}
  </DrawerContent>
</Drawer>

I don't love this. While it does effectively restore my scroll position it feels hack af and comes with an unavoidable content flicker on iOS devices.

I'm beginning to think the whole approach to locking body scroll along with setPositionFixed and restorePositionSetting might need adjusting or even an alt solution. The underlying radix components effectively prevent body scrolling without the need for these techniques.

I'm skeptical about the ability to "keep" the pre-drawer scroll position without a jump/flicker given the current approach of toggling from fixed + overflow hidden back to the natural document flow and then calling scrollTo.

[yousafsabir]

I am facing the same issue in next14. I used nextui's modal, which you can change the position. So by this I was able to replicate drawer

link: NextUI's Modal

[yoannakr]

@emilkowalski I'm facing similar problem, on closing drawer the scroll position undesirably jumps to the top of the page and then back again.

drawer_problem.mp4

[emilkowalski]

Can someone create a codesandbox demo that shows this problem and include your browser and device? It's hard to reproduce these issues consistently for me so I'd appreciate a demo, thank you!

[yoannakr]

@emilkowalski Seems like the issue is caused by
html { scroll-behavior: smooth; }

Here is a codesandbox link

[emilkowalski]

@yoannakr Thank you, I will try to fix it somewhere this week once I have some time.

[daniel31x13]

@emilkowalski I'm facing the exact issue @yoannakr is facing, any updates?
And btw thanks for this awesome work, I'll definitely be using this for Linkwarden due to the amount of time it saves!

[mykytaui]

@emilkowalski I'm facing the exact issue @yoannakr is facing, any updates? And btw thanks for this awesome work, I'll definitely be using this for Linkwarden due to the amount of time it saves!

same here :DD

my temporary way to fix that, if u have scroll-behavior: smooth inside ur html tag:

React.useEffect(() => {
document.documentElement.style.scrollBehavior = "auto";
return () => {
document.documentElement.style.scrollBehavior = "smooth";
};
}, []);

[emilkowalski]

This has been fixed in #219, I updated the package on npm so you guys can update and get it working right away. Have a nice Sunday!

[asobirov]

Seems like this issue is still present when used with @tanstack/react-virtual. Unfortunately, I don't have a repro currently, will try to make one when i can. I'm currently not sure what specifically causing this though, but it seems to work all good without the tanstack virtual

[asobirov]

Couldn't replicate the exact behaviour, but if you try scrolling down a bit (seems like the items lower the initial 100vh) and click the drawer trigger then the drawer won't open - https://codesandbox.io/p/devbox/drawer-scrolls-to-top-forked-mx755p.

I pretty much put the code from tanstack window example into the OP's repro.

I think the scroll to the top issue also may occur if window + infinite scroll is used (rough guess, since that's what im using)

[OrenMag]

I'm experiencing the same, on lastest version - upon opening the Drawer - the body styles are reset causing the page to jump to the top (not even scroll) - that's the body once the drawer opens:

[franzwilhelm]

Can confirm that the issue is caused by the height change in body as noted by @OrenMag . Only way for me to avoid the issues is to set a height with !important on body, which is sub-optimal. @emilkowalski I'm not sure if there are any recommendations on how to style body/html tags in order to make sure vaul works correctly?

[OrenMag]

@franzwilhelm Opened an issue here:
#318

[daniel31x13]

To all the folks who are still encountering the issue, as @yoannakr pointed out, you have
html { scroll-behavior: smooth; }
somewhere in your code. Remove that and it’ll be fixed.

[OrenMag]

That's not the case for us, no html { scroll-behavior: smooth; } in our code base ...

To all the folks who are still encountering the issue, as @yoannakr pointed out, you have html { scroll-behavior: smooth; } somewhere in your code. Remove that and it’ll be fixed.