search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.78k stars 214 forks source link

When navigating between pages using Link the window isnt at the top of the page #576

Closed glassesUSA closed 9 months ago

glassesUSA commented 10 months ago

Describe the bug When scrolling down and hitting a Link component, the page navigates slightly scrolled down

To Reproduce

  1. Go to https://optimaxeyewear.gusadev.com/vendors/glassesusa/
  2. Click on the button on Discover Our Brands
  3. Observe

Expected behavior Window should be at the top of the page

Examples Please create a small example of the bug. To do this you can use online platforms like JSFiddle, CodeSandbox or StackBlitz. You can also create a separate Github repository which I can clone.

Environment

Additional context NextJS latest version

KingSora commented 10 months ago

@glassesUSA good day :)

I'm not sure if the same thing happening on my end.. The scroll offset seems to be always 0 after navigation:

https://github.com/KingSora/OverlayScrollbars/assets/12936317/7bef7121-c120-4e50-afc6-8d94b3159c86

glassesUSA commented 10 months ago

Apologies - I sent the wrong link! https://optimaxdev.github.io/optimaxeyewear/vendors/glassesusa - This is the new site that has the issue

KingSora commented 10 months ago

@glassesUSA there seems to be an issue with the initialization because the body elements initialization is a bit special. Are you able to share your code with me?

KingSora commented 10 months ago

At this point I'm fairly certain that you're doing something like this:

<OverlayScrollbarsComponent element="body">
</OverlayScrollbarsComponent>

To initialized OverlayScrollbars to / as the body element. The problem here is that the OverlayScrollbarsComponent wasn't really designed to do that. Its intended usecase is to use it for everything besides the body element.

Please use the useOverlayScrollbars hook for the initialization instead:

const MyComponent = () => {
  const bodyRef = useRef(null);
  const [initialize, osInstance] = useOverlayScrollbars({ options, events, defer });

 useEffect(() => {
   const { current: body } = bodyRef;
   if (body) {
     initialize(body);

     return () => osInstance()?.destroy();
   }
 }, [initialize, osInstance])

  return (<body ref={bodyRef} data-overlayscrollbars-initialize="">
    content
  </body>);
}

I could adapt the component to be also able to initialize the body element properly, but thats the current workaround I recommend.

glassesUSA commented 10 months ago

Perfect thank you!