Feature: Sidenav or Route Scroll Service
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
#### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với workaround của app.component được nêu trong issue, đặc biệt là router.events và NavigationEnd, đồng thời kiểm tra cách .mat-sidenav-content quản lý việc cuộn. Xác định điểm đầu vào phù hợp cho các thay đổi route và xác minh rằng việc điều hướng giữa các view của sidenav sẽ đặt lại vị trí cuộn của nội dung về đầu, không bao gồm nội dung sidenav. Không có file test cụ thể nào được nêu, vì vậy hãy bổ sung hoặc tìm coverage cho việc điều hướng route và hành vi cuộn.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, web-dev
- Loại issue
- Tính năng
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100