angular / angular/components

Feature: Sidenav or Route Scroll Service

Abierto
#4,280 15 comentarios 23 reacciones 0 asignados Ver en GitHub
area: material/sidenav feature P2
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Bug, feature request, or proposal:
Feature Request

#### What is the expected behavior?
Using a common native API call to `window.scrollTo(0, 0)` or doing something similar on the document body, etc would allow for scrolling the page to the top after a route ends when using a `sidenav`, otherwise the next view starts at the same position in the page.

#### What is the current behavior?
Routing between views within the sidenav content maintains the same scroll position assuming the content is the same length.

#### What are the steps to reproduce?
Add a sidenav and try to scroll to the top of the page anywhere at anytime. Eventually, I figure out this solution and stuck it in my `app.component`.

```
this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(() => {
const contentContainer = document.querySelector('.mat-sidenav-content');
if (contentContainer) {
document.querySelector('.mat-sidenav-content').scroll({ top: 0, left: 0, behavior: 'smooth' });
} else {
this.window.scroll({ top: 0, left: 0, behavior: 'smooth' });
}
});
```

#### What is the use-case or motivation for changing an existing behavior?
Routing between views within the sidenav should be able to start at the top of the page, which is a common use case. Also, scrolling a browser using the native API has been around forever so it's a bit confusing when you expect it or one of the many variations of scrolling to work and they don't.

#### Which versions of Angular, Material, OS, browsers are affected?
Angular 4.0.2
Angular Material 2.0.0-beta.3

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la solución alternativa de app.component mostrada en el issue, especialmente con router.events y NavigationEnd, e inspecciona cómo .mat-sidenav-content controla el desplazamiento. Determina el punto de entrada adecuado para los cambios de ruta y verifica que, al navegar entre vistas de sidenav, la posición de desplazamiento del contenido se restablezca al principio sin incluir el contenido de sidenav. No se especifica ningún archivo de pruebas concreto, así que añade o localiza cobertura para la navegación entre rutas y el comportamiento del desplazamiento.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, web-dev
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.