angular / angular/components

Feature: Sidenav or Route Scroll Service

Open
#4,280 15 comments 23 reactions 0 assignees View on GitHub
area: material/sidenav feature P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with the app.component workaround shown in the issue, especially router.events and NavigationEnd, and inspect how .mat-sidenav-content owns scrolling. Determine the appropriate entry point for route changes and verify that navigating between sidenav views resets the content scroll position to the top without sidenav content. No specific test file is named, so add or locate coverage for route navigation and scroll behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.