如何在不使用 jQuery 的情况下在 Angular2 中获取元素的 offSetTop答案

【问题标题】：How to get in Angular2 the offSetTop of an element without using jQuery如何在不使用 jQuery 的情况下在 Angular2 中获取元素的 offSetTop
【发布时间】：2016-03-09 18:40:51
【问题描述】：

我正在尝试创建一个指令，当元素可见时，该指令会慢慢淡入照片。为此，我的第一个想法是比较项目相对于顶部的位置（同时检查窗口的高度）。但我可以找到使用 Angular2 的方法。

这是我目前的代码：

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
    selector: '[fadeInPhoto]',
    host: {
        '(window:scroll)': 'onScroll()'
    }
})
export class FadeInPhotoDirective{
    private scrollTop: number;
    private initialClass: string;
    constructor(private _el: ElementRef, private _renderer: Renderer){
        this.initialClass = 'thumbnail';
    }

    onScroll(){
        console.log('Photo top:', this._el);
    }
}

但是 this._el 似乎没有包含该信息的任何方法或属性。

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

"offsetTop 是相对于它在文档中的位置，而不是相对于视口。" - 见下面的链接

我能够使用以下方法从文档顶部获取 ACTUAL offsetTop：

this.element.nativeElement.getBoundingClientRect().top

见：https://stackoverflow.com/a/40877754/1742393

【讨论】：

【解决方案2】：

Renderer 提供了一系列方法，但 AFAIK offsetTop 不是其中之一（它们都只是设置值，而不是获取值）。

你可以改用：

this._el.nativeElement.offsetTop

【讨论】：

由于某种原因它总是返回0。该元素位于页面底部（尚不可见），滚动后元素可见......但offSetTop总是返回0
你能创建一个 Plunker 吗？
我试试，我会贴在这里
@Fabiot 尝试在可以实现的 ngOnInit 方法中获取偏移量
我和@Fabiot 有同样的问题。我的private elementRef: ElementRef offsetTop 始终为 0。

【解决方案3】：

尝试这样做：

确保在构造函数中声明元素为“私有”：

constructor(private el: ElementRef) { ...}
确保在页面上已经存在元素后获得 offsetTop：

ngAfterViewInit() { console.log('el.nativeElement: ', this.el.nativeElement.offsetTop); }

【讨论】：

【解决方案4】：

我认为你应该可以这样访问它：

this._el.nativeElement.offsetTop

【讨论】：

【解决方案5】：

尝试在模板中使用引用：

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div> <img src="../pic1"></div>
    <div> <img src="../pic2"></div>
    <div> <img src="../pic3"></div>

</div>

并使用 ref 名称作为参数：

@ViewChild('galleryContainer') galleryContainer: ElementRef;

别忘了提到任何这样声明的子视图只有在视图初始化后才可用。第一次发生这种情况是在 ngAfterViewInit 中（导入并实现 AfterViewInit 接口）。

然后在你的模板中调用这样的方法：

<div class="arrow " (click)="topArrowEffect()"  ></div>

在你的控制器中你的方法应该是这样的：

topArrowEffect(){
        this.galleryContainer.nativeElement.scrollTop =10;
}

【讨论】：

【解决方案6】：

在 html 中：

<div (click)="getPosition($event)">xxx</div>

在打字稿中：

getPosition(event){
    let offsetLeft = 0;
    let offsetTop = 0;

    let el = event.srcElement;

    while(el){
        offsetLeft += el.offsetLeft;
        offsetTop += el.offsetTop;
        el = el.parentElement;
    }
    return { offsetTop:offsetTop , offsetLeft:offsetLeft }
}

【讨论】：

【解决方案7】：

尝试这样做：

import { Component, OnInit, HostListener, ViewChild } from '@angular/core';


    @ViewChild("pageMenu")
      menuStickyElement;

     @HostListener("window:scroll", [])
      sticklyMenu() {
        // Get top height 
        this. offsetTop = document.documentElement.scrollTop
        if (document.documentElement.scrollTop >= this.menuStickyElement.nativeElement.offsetTop) {
          this.stickyNavMenu = true;
        } else {
          this.stickyNavMenu = false;
        }
      }

【讨论】：