Storybook: Addon-docs: Docs scrolling to bottom when loaded

Created on 3 Oct 2019  路  4Comments  路  Source: storybookjs/storybook

Describe the bug
When a user loads a doc page, the page automatically scrolls to the bottom of the story. It should scroll to the top or provide a way to disable the scroll altogether.

To Reproduce
Steps to reproduce the behavior:

  1. Repro is here at https://github.com/jgodi/storybook-test
  2. Load storybook
  3. Go to the Icon Cheatsheet story
  4. Notice that it scrolls to the bottom

Expected behavior
Keep scroll up at the top

System:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 69.0.1
    Safari: 13.0.1
  npmPackages:
    @storybook/addon-actions: ^5.2.1 => 5.2.1 
    @storybook/addon-docs: ^5.2.1 => 5.2.1
    @storybook/addon-links: ^5.2.1 => 5.2.1 
    @storybook/addon-options: ^5.2.1 => 5.2.1 
    @storybook/addon-storysource: ^5.2.1 => 5.2.1 
    @storybook/addons: ^5.2.1 => 5.2.1 
    @storybook/cli: ^5.2.1 => 5.2.1 
    @storybook/react: ^5.2.1 => 5.2.1 
docs bug

All 4 comments

The smooth scrolling in general seems a little off. If i have a long page with a lot of stories, clicking on each one jumps to the top of the page and slowly scrolls down, and the story i'm scrolling do ends up at the bottom of the page.

I think these settings need some adjustment:

https://github.com/storybookjs/storybook/pull/7994/files#diff-e6335e6f979d5e741b3d10a7e7106ec5R60-R64

This feels better, but doesn't quite scroll the heading into view at the top of the page.

element.scrollIntoView({
  behavior: 'auto',
  block: "start",
  inline: 'nearest'
});

Is this the intended behavior? I'm curious whether I'm using the addon wrong, or if the intended behavior is to scroll to bottom? Since the focus of the addon is for docs, it doesn't seem like something that should be intentional, since the ideal consumption would be top to bottom.

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.34 containing PR #8629 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.6 containing PR #8629 that references this issue. Upgrade today to try it out!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tirli picture tirli  路  3Comments

purplecones picture purplecones  路  3Comments

dnlsandiego picture dnlsandiego  路  3Comments

miljan-aleksic picture miljan-aleksic  路  3Comments

rpersaud picture rpersaud  路  3Comments