如何獲取Ember項目中元素的頂部偏移量？

Question

我嘗試使用JQuery獲取元素的偏移位置

Ember.$('section:nth-child(2)').offset().top

但是此代碼返回錯誤的值。 問題來自Ember，它在我的元素周圍添加了一些Div包裝器。

我的DOM結構如下所示：

Html > Body > 
    Div[class='ember-view'] > Div[class='ember-view'] > 
        Div[class='Container'] > Div[class='row']
           Section
           Section
           ...

但是這個Ember Div並不計入parentNode。 有什么辦法嗎？

編輯-這是適用於部分的CSS代碼：

section {
    position: relative;
    height: 100vh;
}
article, aside, details, figcaption, figure, footer, header, hgroup,     main, menu, nav, section, summary {
    display: block;
}
*, *::before, *::after {
    box-sizing: inherit;
}

和JS代碼：

__init : function() {
Ember.$('#expand-btn').click(function(event) {
  event.preventDefault();
  Ember.$('.nav-link').removeClass('active');
  Ember.$('.nav-link:nth-child(2)').addClass('active');

  var elem = Ember.$('.container>#main>section:nth-child(2)')[0];
  //Return 509, not 480
  console.log(elem.getBoundingClientRect().top - elem.scrollTop);

  Ember.$('html, body').animate({scrollTop : Ember.$('section:nth-child(2)').offset().top}, 750);
});

}.on('didInsertElement')

didInsertElement確保在加載DOM之后執行代碼。

Answer 1

有一個很棒的DOM元素方法，稱為getBoundingClientRect ，該方法返回一個對象，該對象包含距視口左上角的所有偏移量。

因此，只需執行以下操作：

Ember.$('section:nth-child(2)')[0].getBoundingClientRect().top

應該讓你覆蓋。

Answer 2

該結構沒有內在的東西可以改變offset()的值。 div默認為無樣式，並且offset相對於文檔而不是父元素進行計算。

如果offset發生變化，則是由於您的樣式或頁面處於不完整狀態時調用了offset （例如說圖像尚未完成加載）。

如果需要更精確的答案，請提供一個更完整的示例，最好在調用Ember.$('section:nth-child(2)').offset().top和樣式的位置進行。

Answer 3

所以我找到了解決方案。 這不是解決方案，而是技巧。 我必須注意導航欄偏移量為56px。 所以我減去nabber高度到偏移量。 我想我會聯系Materializecss開發人員，以找到更好的方法