如何在 Ember 项目中获取元素的顶部偏移量？答案

【问题标题】：How to get the top offset of an element in an Ember project?如何在 Ember 项目中获取元素的顶部偏移量？
【发布时间】：2015-07-22 00:08:55
【问题描述】：

我尝试使用 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 加载后执行。

【问题讨论】：

标签： javascript jquery ember.js

【解决方案1】：

有一个很棒的 DOM 元素方法，称为 getBoundingClientRect，它返回一个对象，其中包含从视口左上角的所有偏移量。

所以就这样吧：

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

应该可以覆盖你。

【讨论】：

我试试你的方法。它返回与 offset() 或 position() 相同的结果。我的屏幕尺寸是 480，它返回 509px
那么你查询的元素有可能包含在另一个垂直滚动的元素中，或者整个文档都有滚动。在这种情况下，您还必须添加上述的scrollTop（请参阅我链接到的文档）。
当我制作 getBoundingClientRect().top - scollTop 时结果相同。
我找到了问题，我使用 Materializecss 作为 CSS 框架。当我删除他们的导航栏时，一切正常。所以导航栏是问题所在。它混合使用相对定位和固定定位。

【解决方案2】：

该结构本身没有任何东西会改变offset() 的值。默认情况下，div 没有样式，offset 相对于文档而不是父元素进行计算。

如果offset 发生更改，那是因为您的样式或因为在页面处于不完整状态时调用了offset（例如图像尚未完成加载）。

如果您想要更准确的答案，请提供更完整的示例，最好包含您调用Ember.$('section:nth-child(2)').offset().top 的位置和样式。

【讨论】：

【解决方案3】：

所以我找到了解决方案。这更像是一个技巧而不是一个解决方案。我必须处理 56px 的导航栏偏移量。所以我将 nabber 高度减去偏移量。我想我会联系 Materializecss 开发人员，以找到更好的方法

【讨论】：