Usar scrollPositionRestoration: 'enabled' para RouterModule es realmente una buena característica, pero ¿cómo deshabilitar la animación de desplazamiento/desplazamiento suave para que se ajuste a la posición?
@NgModule({ imports: [ RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', }), ], exports: [RouterModule] }) export class AppRoutingModule { }Antecedentes: tener un desplazamiento suave no se siente como navegar en un sitio web "normal" porque normalmente, si se navega de un lado a otro, no hay un desplazamiento suave.
El problema no era Angular, sino que Bootstrap configuró smooth-scrolling CSS en smooth .
Deshabilitado por $enable-smooth-scroll: false;
Hay un problema abierto en el github de Angular sobre scrollPositionRestoration
Traté de hacer una alternativa, espero que te ayude:
https://stackblitz.com/edit/angular-ivy-jxm1mu?file=src%2Fapp%2Fapp.module.ts
No pude reproducir el comportamiento de navegar hacia atrás con stackblitz porque la aplicación se vuelve a cargar.
Cuando el usuario se desplaza, guarde la posición de desplazamiento Y y luego, cuando el enrutador emita el evento de desplazamiento, no lo hace suave.
window.scrollTo doc dice que hay un behavior: instant , usé auto porque linter lo marcó como un error, por lo que tal vez no sea ampliamente compatible.
Estaba teniendo el mismo problema. Intenté usar la solución de Mick de cambiar la variable en el archivo "scss/_variables.scss" de bootstrap pero no funcionó para mí (además, ya que estaba en node_modules que no compartimos mientras el código está confirmado, cualquier cambio tampoco serviría de nada, supongo). Así que intenté montar en styles.css como: -
html { scroll-behavior: auto !important }Y funcionó para mí. Tenía varios archivos CSS en el contexto global del proyecto y tal vez por eso el cambio de variable de arranque no funcionó para mí porque otros archivos también pueden haber interferido.