0

使用任何HTML元素的一些方法:如何獲取角2中的第一個父scrollTop元素?

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) 

如何將其與完成角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滾動。當滾動是文檔時,根本不需要這個計算。

+0

您是否嘗試過'parentNode'?你可以創建一個重擊者嗎? – yurzui

+0

我添加了我的代碼 – AngularOne

回答

2

如果你知道你的表的類,你可以創建一個循環來找到你的表,然後得到你的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名稱,所以你不需要知道它是否是文件。

編輯: 你需要添加像這樣的mouseover和類;

<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> 
相關問題