Feature: Sidenav or Route Scroll Service
- 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