Scroll position does not reset when switching between long docs

[zolk]

Describe the bug With multiple pure-documentation MDX docs, the scroll position of the preview window does not reset when switching between docs.

To Reproduce Steps to reproduce the behavior:

1. Create at least two MDX docs without stories, with content long enough to result in a scroll bar.
2. Select the first doc in the sidebar.
3. Scroll down the first document.
4. Select the second doc in the sidebar.

The second doc loads with the scroll position already partially down the page.

Expected behavior Selecting a doc should always start with the scroll position at the top of the page.

Screenshots

Code snippets https://github.com/zolk/storybook-mdx-scroll-bug

System: Reproducible in Storybook 6.0.21.

[hoop71]

I can take a look at this one...

[JulienTromas]

Hi ! Is this issue still open ? Could I take a look at it ?

[mariasimo]

Hi! Any news on this? I just spot this issue with "@storybook/react": "^6.1.9"

[JulienTromas]

I apologize, I am still trying to understand the architecture of the project. If someone else is interested in solving that issue, please feel free to assign it to them too.

[hoop71]

@JulienTromas @mariasimo I opened a PR for this if anyone wants to take a look and see if it address your issue. #12651

[gaurav6386]

Hey! I have made a pull request #2 to fix this issue. @zolk @shilman @hoop71 please review this

[zolk]

@gaurav6386 What you've provided is a workaround for fixing this issue in the reproduction example. It does not fix the bug within Storybook itself, which is the purpose of this issue.

[gaurav6386]

Hey @zolk Thanks for reviewing it. My bad for mentioning it as a fix. It is indeed a workaround. From what I have researched from storybook documentation the unexpected behavior seems to lie in the default iframe rendering of the canvas tab. Maybe setting some global preview params or setting up a custom webpack configuration will rectify it. I'm still looking into it

[jessica-jarett]

Any update on a fix for this?

[fcisio]

Hi everyone, I believe I just figured this one out! 🎉🎉🎉

It seems that pages will only scroll back up if the docs tab is selected. Now, it happens quite often that you open an mdx story on the canvas tab.

👆If you look at the screenshot above, you'll see that the canvas tab is actually active.

Solution:

We have to manually select the docs tab and hide the canvas one (this should probably be the default behaviour, but well...)

<Meta
  title="Get Started"
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

[JuhG]

Hey, I still see this as issue with Storybook 7. The proposed solution doesn't seem to do anything anymore. This is extremely confusing to people, feels broken. They click on a link and have no idea where they are.

As a short term solution I started adding #storybook-docs to links like this, so it scrolls to top:

[the contributing docs](?path=/docs/contributing-contributing--docs#storybook-docs)

But obviously this makes no sense longer term.

@shilman Is there any solution to this or is this already on the roadmap? If not I can try to help with this if you give me a head start.

Side question: isn't this happening because SB uses a query string instead of real urls and react-router gets confused? Is there any way to switch to real routes or is that on the roadmap? /?path=/docs/structure-card--docs to something like /structure/card/docs

Thanks!