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

Posted 2023-02-22

【中文标题】在 angular2 中显示和隐藏 div 时移至顶部

【英文标题】：Move to Top on showing and hiding divs in angular2

【发布时间】：2017-06-15 13:46:17

【问题描述】：

我在一个固定长度的 div-Content div 中有 2 个 div。 内容 div 里面有 2 个 div - div1 和 div2。 与内容 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;

打字稿代码-

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

【问题讨论】：

请显示一些代码。在这种情况下，最好使用 Plunker。

分享你尝试过的代码

请分享一些代码。并检查。对于显示和隐藏 div，您使用的是什么 hidden 或 *ngIf ？

添加了代码。

看来你只需要滚动回到 div 的顶部。在角度我可以给你一个解决方案，但不是打字稿。

【参考方案1】：

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

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