css - Angular 10 : Router with anchorScrolling does not work on div with position absolute and overflow: auto

Question

我确定我一定做错了什么，但不知道是什么。需要一些帮助/指示。
我正在使用 Angular 10。
我在 app-routing.module 中启用了 anchorScrolling

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

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

如果跳转部分的容器(我想要滚动到的带有 #id 的部分)的容器是 ，这将起作用。不是 有属性溢出:自动设置，但如果我设置属性溢出:自动然后滚动停止通过anchorScrolling工作。我仍然可以手动滚动或通过输入 url 和片段来滚动。
我创建了一个 StackBlitz 元素来演示这一点。
这里的元素默认运行
https://stackblitz.com/edit/angular-ivy-ub5k7q
但是，如果您添加

overflow:auto

到

.sections 

在 hello.component.css 类中，您将看到顶部给出的部分链接不会导致滚动，即使 url 确实使用正确的 route#fragment 进行了更新。
这是预期的行为吗？

Answer 1

我无法弄清楚为什么会发生这种情况。尝试了几分钟，但我可以首先达到我认为是您的目标。
我所做的更改(仅在 hello.component.css 中):

.sections{
  position:relative;
  top:5rem;
  border:2px solid rebeccapurple;
  overflow:auto; 
}

我删除了您为具有“绝对”值的位置属性设置的高度。我还将 position 属性的值更改为相对值。
它正在使用设置为“绝对”的位置，但是每当您应用宽度和高度的值时，它就会停止工作。