angular / angular/components

Feature: Sidenav or Route Scroll Service

Ouverte
#4,280 15 commentaires 23 réactions 0 personnes assignées Voir sur GitHub
area: material/sidenav feature P2
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le contournement de app.component montré dans l’issue, en particulier router.events et NavigationEnd, et examinez la manière dont .mat-sidenav-content contrôle le défilement. Déterminez le point d’entrée approprié pour les changements de route et vérifiez que la navigation entre les vues sidenav réinitialise la position de défilement du contenu au début, sans inclure le contenu de sidenav. Aucun fichier de test précis n’est indiqué ; ajoutez ou trouvez donc une couverture pour la navigation entre les routes et le comportement du défilement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend, web-dev
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.