基于id的滚动顶部的角度2距离

Question

我正在为我的一个项目使用角度2。我有3个桌子，其高度未知，即它可以增长。现在滚动，我想知道元素的顶部是否已通过顶部导航栏，即如果第一个表是滚动的，第二个是可见的，我需要初始化一个变量，以便我可以进行进一步的操作。我尝试使用viewchild作为

@ViewChild('leaveApproval') element:ElementRef;
console.log(this.element.nativeElement.topOffset);

并在html中

  <div class="twelve wide right floated column" #leaveApproval>

但是console.log总是返回“undefined”。我如何解决这个问题或如何解决这个问题

Answer 1

您使用的是错误的属性。正确的是this.element.nativeElement.offsetTop

<强>更新

以下是如何获取活动表并相应地执行进一步操作的方法：

1. 假设您的顶部导航栏标识为navBar，请获取navBar元素：

     

   @ViewChild('navBar') navBar: ElementRef;

2. 获取表格，让我们说ids tableOne和tableTwo：

   @ViewChild('tableOne') tableOne: ElementRef;
   @ViewChild('tableTwo') tableTwo: ElementRef;
   

3. 这是一个返回可见表引用的函数：

   getVisibleTable(): ElementRef
   {
       let visibleTable: ElementRef = null;
       const navBarHeight = this.navBar.nativeElement.height;
       const tableOneTopOffset = this.tableOne.nativeElement.offsetTop;
       const tableTwoTopOffset = this.tableOne.nativeElement.offsetTop;
   
       if (tableOneTopOffset >= navBarHeight) 
       {
           visibleTable = this.tableOne;
       }
       else if (tableOneTopOffset < navBarHeight)
       {
           if (tableTwoTopOffset >= navBarHeight)
           {
               visibleTable = this.tableTwo;
           }
           else
           {
               visibleTable = null;
           }
       }
   
       return visibleTable;
    }