storybook 文档页面无法滚动到锚定文档块,

pbgvytdp 于 3个月前发布在其他

关注(0)|答案(1)|浏览(43)

描述bug

在MDX页面中添加一个<Anchor>,没有任何效果，也不会滚动到。

重现

在MDX页面中添加一个锚点

<Anchor storyId="my-button--primary">
<h3>Primary</h3>
<Canvas>
    <Story id="my-button--primary" />
</Canvas>
</Anchor>

生成以下内容

<div id="anchor--my-button-primary">
<h3>Primary</h3>
  ...
  <div id="story--my-button--primary>
  ...
</div>

当我点击侧边栏菜单中的"Primary"时，它会滚动到<div id="story--my-button--primary>,我的标题会从屏幕顶部消失。
我在MDX中使用这个解决方法，它有效。

<div id="story--my-button--primary>
<h3>Primary</h3>
<Canvas>
    <Story id="my-button--primary" />
</Canvas>
</div>

我希望有一个检查锚点id的机制，可以覆盖滚动故事的目的。

系统

Angular 12.6.2
环境信息：
系统：
操作系统：macOS 11.5
CPU:(12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
二进制文件：
Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.5/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
浏览器：
Chrome: 92.0.4515.107
Edge: 92.0.902.55
Firefox: 89.0.2
Safari: 14.1.2
npm包：
@storybook/addon-a11y: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/addon-actions: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/addon-essentials: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/addon-links: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/angular: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/builder-webpack5: ^6.4.0-alpha.22 => 6.4.0-alpha.22
@storybook/manager-webpack5: ^6.4.0-alpha.22 => 6.4.0-alpha.22