如何获取角度 2 中的第一个父 scrollTop 元素？答案

【问题标题】：How to get the first parent scrollTop element in angular 2?如何获取角度 2 中的第一个父 scrollTop 元素？
【发布时间】：2017-10-06 14:24:47
【问题描述】：

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

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

我有容器的参考：

constructor(private viewContainerRef)

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

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

angular 2 怎么做？

我发现了一些可能有帮助的东西，但是在将其更改为打字稿时，它在这一行失败了： 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 滚动。当滚动是文档时，根本不需要这个计算。

【问题讨论】：

你试过parentNode吗？你能创建一个 plunker 吗？
我添加了我的代码

标签： javascript angular typescript angular2-directives angular2-components

【解决方案1】：

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

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

  }

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

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

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

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

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

【讨论】：