I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated.
My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file.
const routes: Routes = [
{ path: 'docs', component: DocsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
useHash: true,
anchorScrolling: 'enabled'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Everything works perfectly fine as long as the container for the jump-sections (sections with #id where scrolling is desired) does not have the overflow:auto property set. However, if I do set the overflow:auto property, then the scrolling stops working through anchorScrolling. Manual scrolling or typing the URL with the fragment still works though.
To demonstrate this issue, I have created a StackBlitz project.
Check out the StackBlitz project here
If you add
overflow:auto
to the
.sections
class in the hello.component.css file, you will notice that the section links at the top no longer trigger scrolling even though the URL updates correctly with the route#fragment.
Is this behavior expected?