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

debugcn 发表于 Dev

AngularOne

在任何 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滚动。当滚动是文档时，根本不需要这个计算。

奥努尔汗艾塔克

如果您知道您的表的类，您可以创建一个循环来查找您的表，然后获取您的 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。