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

Question

我正在为我的一个项目使用 angular 2。我有 3 个 table 高度未知，即它可以 growing.Now 滚动，我想知道是否元素的顶部已经通过顶部导航栏，即如果第一个 table 被滚动而第二个是可见的，我需要初始化一个变量以便我可以做进一步的事情 operations.I 尝试使用 viewchild as

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

并在 html

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

但 console.log 总是 returns "undefined"。我该如何解决这个问题或如何解决这个问题

Answer 1

你用错了属性。正确的是this.element.nativeElement.offsetTop

更新：

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

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

@ViewChild('navBar') navBar: ElementRef;

获取 tables，假设使用 ID tableOne 和 tableTwo:

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

这是一个将 return 可见 table 参考的函数：

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

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

angular 2 distance from top on scroll based on id

html

angular2-directives

angular2-template

angular