angle2のdivの表示と非表示について上に移動

Question

固定長div内に2つのdivがあります。 コンテンツdivには、div1とdiv2の2つのdivがあります。 両方のdivはContent divに比べて非常に大きいです。 コンテンツdiv内にあるコンテンツをスクロールすることができます。 ユーザーはdiv1を読んでdiv2を非表示にしてdiv1を非表示にした後、div1のボタンをクリックします。 しかしdiv2ボトムが表示されるたびに、トップデータは表示されません。 div1が表示されず、div2が表示されている場合、div2トップがコンテンツdivの中に来るようにするにはどうすればよいですか？

ご協力いただければ幸いです。

HTMLコード -

<div class = "completeBody"> 
    <div class = "header"> 
    </div> 
    <div class = "content"> 
    <div class = "content1" *ngIf="showContent1"> 
     <div> 
      top 
     </div> 
     <div class="bottomPoint"> 
      bottom 
      <button (click)="showContent2()">SHOW Content2</button> 
     </div> 
    </div> 
    <div class = "content2" *ngIf="!showContent1"> 
     <div> 
      top 
     </div> 
     <div class="bottomPoint"> 
      SEE NOW YOU ARE IN BOTTOM,I WANT THAT WHEN CONTENT2 SHOULD BECOME VISIBLE,ITS TOP SHOULD COME FIRST 
     </div> 
    </div> 
    </div> 
    <div class = "footer"> 
    </div> 
</div> 

CSSコード -

/* Styles go here */ 

.completeBody 
{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
.header 
{ 
    height: 10%; 
    width: 100%; 
    background-color: red; 
} 
.content 
{ 
    height: 80%; 
    margin: 20px; 
    background-color: #efefef; 
    border: 2px solid black; 
    overflow: auto; 
} 
.footer 
{ 
    height: 10%; 
    width: 100%; 
    background-color: green; 
} 
.content1 
{ 
    height:1000px; 
    background-color: blue ; 
} 
.content2 
{ 
    height:1000px; 
    background-color: #909090 ; 
} 
.bottomPoint 
{ 
    padding-top:950px; 
} 

活字体コード -

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl: 'app/apphtml.html', 
    styleUrls: ['app/appcss.css'], 
}) 
export class App { 
    showContent1:boolean; 

    constructor() { 
    this.showContent1 = true; 
    } 
    showContent2() 
    { 
    this.showContent1 = false; 
    } 

} 

HERE PLUNKER FOR LINK IS - https://plnkr.co/edit/abjZKMt0CkvJaTgaBDRm?p=preview

Answer 1

スクロールコンテナをビューチャイルドとバインドし、その要素のネイティブプロパティを取得して更新することです。

参照の場合、同じplunkerリンクを参照してください。更新されています。