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

这是一个名为getBoundingClientRect的精彩DOM元素方法，它返回一个对象，其中包含视口左上角的所有偏移量。

所以这样做：

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高度减去偏移量。我想我会联系Materialisecss开发人员以找到更好的方法

如何获得Ember项目中元素的顶部偏移量？

3 个答案: