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

Question

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

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

在html中

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

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

Answer 1

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

---

更新：

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

1. 假设你顶部的导航栏有 id navBar，获取导航栏元素：

   @ViewChild('navBar') navBar: ElementRef;

2. 获取表格，假设 ID 为 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;
    }