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

Question

Using this methods on any HTML element:

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

I have ref to the the container:

constructor(private viewContainerRef)

will work great only and only if you are not scroll down (innerScroll of parent or the browser scroller, the all document). For example think about table that has its inner scroll. If I add tooltip to any row it will work, but when I scroll the table, the calculation is wrong, I need somehow to get the offsetTop of the scroller and subtract it:

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

How can it be done with angular 2?

I found something that may help, but while change it to typescript, it fails on this line: 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];
}

Also, How can I know the element parent scroll is not the document, I mean there is an innerDiv scroll. When the scroll is document, there is no need for this calculation at all.

Have you tried `parentNode`? Can you create a plunker? – yurzui May 08 '17 at 14:38 — yurzui, May 08 '17 at 14:38

Onurhan Aytac · Accepted Answer · 2017-05-10T11:24:36.613

If you know your table's class you can create a loop to find your table then get your offsetTop. I mean the class should be on the overflowed element where the scroll is be created. After finding the offset you can use it whatever you like.

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

  }

If you are not using jquery then you can also use this.

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

  }

It will be not the document since we check with the class or id name so you do not need to know if it is document or not.

Edit: You need to add mouseover and class like this;

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

If it in an another element the class should be there

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

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

1 Answers1