Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preventScrollRestoration setting is not properly working. #316

Open
tomjas1997 opened this issue Apr 2, 2024 · 0 comments
Open

preventScrollRestoration setting is not properly working. #316

tomjas1997 opened this issue Apr 2, 2024 · 0 comments

Comments

@tomjas1997
Copy link

tomjas1997 commented Apr 2, 2024

as can be seen in , this code block exists and it checks for preventScrollRestoration, but afterward it still scrolls.

Should be an easy fix to not call scrollTo when preventScrollRestoration is true

const restorePositionSetting = React.useCallback(() => {
    if (previousBodyPosition !== null) {
      // Convert the position from "px" to Int
      const y = -parseInt(document.body.style.top, 10);
      const x = -parseInt(document.body.style.left, 10);

      // Restore styles
      document.body.style.position = previousBodyPosition.position;
      document.body.style.top = previousBodyPosition.top;
      document.body.style.left = previousBodyPosition.left;
      document.body.style.height = previousBodyPosition.height;
      document.body.style.right = 'unset';

      requestAnimationFrame(() => {
        if (preventScrollRestoration && activeUrl !== window.location.href) {
          setActiveUrl(window.location.href);
          return;
        }

        window.scrollTo(x, y);
      });

      previousBodyPosition = null;
    }
  }, [activeUrl]);

This was undercover when I allowed body to be scrollable with the drawer open.

Maybe someone else is having the same problem so a workaround for this:

    const [offset, setOffset] = useState(0);

    useEffect(() => {
        const onScroll = () => setOffset(window.scrollY);

        window.addEventListener('scroll', onScroll);

        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    <Drawer
        open={isOpen}
        dismissible={false}
        onClose={() => {
            document.body.style.top = `-${offset}px`;
        }}
    >

onClose is called and it runs before scroll restoration so we set the offset value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant