如何获取 angular 2 中的第一个父 scrollTop 元素？

Question

在任何 HTML 元素上使用此方法：

this.viewContainerRef.element.nativeElement.offsetTop
this.viewContainerRef.element.nativeElement.offsetLeft

我已经引用了容器：

constructor(private viewContainerRef)

仅当您不向下滚动（父级或浏览器滚动器的 innerScroll，所有文档）时才会很好地工作。例如，考虑具有内部滚动条的 table。如果我将工具提示添加到任何行，它将起作用，但是当我滚动 table 时，计算是错误的，我需要以某种方式获取滚动条的 offsetTop 并将其减去：

this.viewContainerRef.element.nativeElement.offsetTop - (the scrollTop of first parent)

angular2怎么办？

我发现了一些可能有帮助的东西，但是当把它改成 typescript 时，它在这一行失败了： while (_el = _el.offsetParent) {

findElePosition(_el){

    var _el = this.viewContainerRef.element.nativeElement;

  var isIE = navigator.appName.indexOf('Microsoft Internet Explorer') != -1;

  var curleft = 0;
  var curtop = 0;
  var curtopscroll = 0;
  var curleftscroll = 0;

  if (_el.offsetParent){
    curleft = _el.offsetLeft;
    curtop = _el.offsetTop;

    /* get element scroll position */
    var elScroll = _el;
    while (elScroll = elScroll.parentNode) {
      curtopscroll = elScroll.scrollTop ? elScroll.scrollTop : 0;
      curleftscroll = elScroll.scrollLeft ? elScroll.scrollLeft : 0;

      curleft -= curleftscroll;
      curtop -= curtopscroll;
    }

    /* get element offset postion */
    while (_el = _el.offsetParent) {
      curleft += _el.offsetLeft;
      curtop += _el.offsetTop;
    }
  }

  /* get window scroll position */
  var offsetX = isIE ? document.body.scrollLeft : window.pageXOffset;
  var offsetY = isIE ? document.body.scrollTop : window.pageYOffset;

  return [curtop + offsetY,curleft + offsetX];
}

另外，我怎么知道元素父滚动不是文档，我的意思是有一个innerDiv滚动。当scroll为document时，根本不需要这个计算。

Answer 1

如果您知道 table 的 class，您可以创建一个循环来查找您的 table，然后获取您的 offsetTop。我的意思是 class 应该在创建滚动的溢出元素上。找到偏移量后，您可以随意使用它。

  onMouseOver (event) {
    if (!event.target) {
      return;
    }

    // you can search for your table also with id 
    if (!$(event.target).hasClass("my-table")) {
      this.onMouseOver({target: event.target.parentNode});
      return;
    }

    console.log(event.target.scrollTop);

  }

如果你不使用 jquery 那么你也可以使用这个。

  onMouseOver (event) {
    if (!event.target) {
      return;
    }

    if (!~event.target.className.indexOf("my-table")) {
      this.onMouseOver({target: event.target.parentNode});
      return;
    }

    console.log(event.target.scrollTop);

  }

这不是文档，因为我们会检查 class 或 id 名称，因此您不需要知道它是否是文档。

编辑：您需要像这样添加鼠标悬停和 class；

<table #my-overflowed-element class="my-table" >
  <tr #my-row-with-tooltip on-mouseover='onMouseOver($event)'>
  </tr>
</table>

如果它在另一个元素中，class 应该在那里

<div #my-overflowed-element class="my-table">
    <table>
      <tr #my-row-with-tooltip on-mouseover='onMouseOver($event)'>
      </tr>
    </table>
</div>

如何获取 angular 2 中的第一个父 scrollTop 元素？

How to get the first parent scrollTop element in angular 2?

javascript

typescript

angular2-directives

angular2-components

angular