fix: fix scrollbar no clear issue for #22

phodal · Apr 5, 2020 · e16825f · e16825f
1 parent b43f298
commit e16825f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/src/app/presentation/case-study/case-study.component.html b/src/app/presentation/case-study/case-study.component.html
@@ -9,7 +9,7 @@ <h2>案例（出处见来源）</h2>
  </li>
  </ul>
  </mat-drawer>
- <mat-drawer-content>
+ <mat-drawer-content #drawerContent>
  <component-markdown-render [data]="content"></component-markdown-render>
  </mat-drawer-content>
 </mat-drawer-container>
diff --git a/src/app/presentation/case-study/case-study.component.ts b/src/app/presentation/case-study/case-study.component.ts
@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDrawerContent } from '@angular/material/sidenav';
 
 @Component({
  selector: 'app-case-study',
  templateUrl: './case-study.component.html',
  styleUrls: ['./case-study.component.scss'],
 })
 export class CaseStudyComponent implements OnInit {
+ @ViewChild('drawerContent', {}) drawerContent: MatDrawerContent;
+
  cases = [
  { displayName: '美团', source: 'meituan' },
  { displayName: 'Ledge', source: 'ledge' },
@@ -82,6 +85,7 @@ export class CaseStudyComponent implements OnInit {
  this.http
  .get(this.src, { headers, responseType: 'text' })
  .subscribe((response) => {
+ this.resetScrollbar();
  this.storage.set('casestudy.last', source).subscribe();
  this.content = response;
  const queryParams: Params = { source };
@@ -93,6 +97,12 @@ export class CaseStudyComponent implements OnInit {
  });
  }
 
+ private resetScrollbar() {
+ if (this.drawerContent && this.drawerContent.getElementRef()) {
+ this.drawerContent.getElementRef().nativeElement.scrollTop = 0;
+ }
+ }
+
  private buildSrc(source: string) {
  return `assets/docs/casestudies/${source}.md`;
  }

diff --git a/src/app/presentation/solution/solution.component.html b/src/app/presentation/solution/solution.component.html
@@ -9,7 +9,7 @@ <h2>解决方案</h2>
  </li>
  </ul>
  </mat-drawer>
- <mat-drawer-content>
+ <mat-drawer-content #drawerContent>
  <component-markdown-render [data]="content"></component-markdown-render>
  </mat-drawer-content>
 </mat-drawer-container>
diff --git a/src/app/presentation/solution/solution.component.ts b/src/app/presentation/solution/solution.component.ts
@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDrawerContent } from '@angular/material/sidenav';
 
 @Component({
  selector: 'app-solution',
  templateUrl: './solution.component.html',
  styleUrls: ['./solution.component.scss'],
 })
 export class SolutionComponent implements OnInit {
+ @ViewChild('drawerContent', {}) drawerContent: MatDrawerContent;
+
  solutions = [{ displayName: 'Coding', source: 'coding' }];
  currentSource: string;
  src: string;
@@ -63,6 +66,7 @@ export class SolutionComponent implements OnInit {
  .subscribe((response) => {
  const queryParams: Params = { source };
  this.storage.set('solution.last', source).subscribe();
+ this.resetScrollbar();
  this.content = response;
 
  this.router.navigate([], {
@@ -73,6 +77,12 @@ export class SolutionComponent implements OnInit {
  });
  }
 
+ private resetScrollbar() {
+ if (this.drawerContent && this.drawerContent.getElementRef()) {
+ this.drawerContent.getElementRef().nativeElement.scrollTop = 0;
+ }
+ }
+
  private buildSrc(source: string) {
  return `assets/docs/solutions/${source}.md`;
  }