Css 角度10：带锚点旋转的路由器在具有绝对位置和溢出的div上不工作：自动

我肯定我一定是做错了什么，但我不知道是什么。需要一些帮助/指点

我用的是角度10。 我已在app-routing.module中启用主播滚动

const routes: Routes = [
  { path: 'docs', component: DocsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    anchorScrolling: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果跳转节的容器（我要转到的带有#id的节）没有设置属性overflow:auto，则此操作有效，但如果我设置了属性overflow:auto，则滚动将停止通过锚点滚动。我仍然可以手动滚动或通过键入url和片段

我创建了一个StackBlitz项目来演示这一点。 默认情况下，此处的项目正在运行

但是如果你加上

overflow:auto

到

.sections 

在hello.component.css中初始化，您将看到顶部提供的部分链接不会导致滚动，即使url确实使用正确的路由片段进行了更新

---

这是预期的行为吗？

我不明白为什么会发生这种情况。尝试了几分钟，但我可以达到我认为是你最初的目标

我所做的更改（仅在hello.component.css中）：

我删除了您为position属性设置的高度，该属性的值为“绝对”。我还将position属性的值更改为relative

它正在使用设置为“绝对”的位置，但无论何时应用宽度和高度值，它都会停止工作。

根据答案，我向您提出了一个没有碎片的解决方案，但它是有效的

---

首先更改

a

元素，如下

是stackblitz。
两个问题：-1。为什么要将.sections div设置为绝对位置和溢出：自动2。您在设计和透视（UX）方面的最终目标是什么？这是预期的行为吗？是的，CSS正在按它必须的方式运行。我们的最终目标是什么？你看到我提供的解决方案了吗？@abhaytripathi，我试图实现一个与其父级完全相同的区域，并且当有更多内容时可以滚动。关于“这是否是预期行为”的问题是关于Angular的主播在位置设置为绝对时不起作用。谢谢@alexis，是的，它起作用了，我试图使用片段，以便浏览器返回按钮可以返回到以前的锚位置。我最终使用的解决方案/解决方法是锚使用片段，然后在组件中有片段侦听器，它获取事件并使用与您提供的类似的scrollTo方法进行滚动。好的，如果你找到了最适合你的东西，那就太好了：）
.sections{
  position:relative;
  top:5rem;
  border:2px solid rebeccapurple;
  overflow:auto; 
}

toSection(section: string){
  const elem = document.getElementById("section-"+section);
  const topPos = elem.offsetTop
  document.getElementById('sections').scrollTo({top:topPos-10, behavior:'smooth'})
}