Question

我在一个固定长度的div-Content div中有2个div。内容div里面有2个div - div1和div2。与Content div相比，这两个div都非常大。用户可以滚动Content div中的内容。用户将读取div1然后单击div1中的按钮，之后我取消隐藏div2并隐藏div1。但每次显示div2底部，而不是顶部数据。我怎样才能确保当div1被隐藏并显示div2时，div2 top show会进入内容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;
}

TYPESCRIPT代码 -

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

Answer 1

这样做的方法是将我们的滚动容器与viewchild绑定，然后获取该元素的本机属性并进行更新。

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

在angular2中显示和隐藏div时移至顶部

1 个答案: