移动到顶部显示和隐藏div2角色

我有一个固定长度的div div内容2 div。内容div里面有2个div - div1和div2。与Content div相比，这两个div都非常大。用户可以滚动Content div内的内容。用户将阅读div1，然后点击div1中的按钮，然后我隐藏div2并隐藏div1。但每次显示div2底部时，不是顶部数据。我怎样才能确保当div1隐藏和div2显示，div2顶部显示内部内容div。移动到顶部显示和隐藏div2角色

任何帮助将不胜感激。

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; 
    } 

}

这里是PLUNKER链接 - https://plnkr.co/edit/abjZKMt0CkvJaTgaBDRm?p=preview

来源

2017-01-30 RHUL

请显示一些代码。在这种情况下，理想的情况是使用Plunker。 –

分享你的代码你试过 – Bhavanaditya

请分享一些代码。并检查。为了显示和隐藏div，你在使用'hidden'还是'* ngIf'？ –

的这样做的方法是将我们的scroll容器与viewchild绑定，然后获取该元素的本地属性并更新它。

对于任何参考，请参阅相同的plunker链接，它已更新。

来源

2017-01-30 15:39:05 RHUL

移动到顶部显示和隐藏div2角色

回答

相关问题