当浮动元素在视口之外时，如何获取它的左偏移量？

Question

这是我的情况。我创建了几个并排堆叠的面板，它们被包裹在一个主容器中。每个面板采用 100% 的视口宽度和高度。我的目标是当我单击它们各自的 link 时能够水平滚动到每个面板。使用纯 css 方法效果很好。但是，我正在学习 jQuery，我希望使用 .scrollTo() 方法来实现这一点。

当面板一层一层堆叠（即垂直）时，我能够获得每个面板的顶部偏移并很好地滚动到它们的位置。

对于水平变化，我无法获得面板的左偏移量。我得到所有这些的左偏移量为零。如果我的逻辑是正确的，比如说视口是 1920px 宽，第二个面板的左偏移应该是 1920px，第三个是 3840px 等等

根据我目前收集到的信息，这是因为面板在视口之外。事实上，我已经将 20% 的宽度应用于面板，以便它们在视口中都可见，然后我试图提醒它们的左偏移。他们被成功提示给我。

那么我该如何解决这个问题呢？看起来我正在重新发明轮子，但就像我说的，我正在学习 jQuery 所以我需要了解为什么它会这样以及我如何解决这个问题。任何帮助将不胜感激 :) 以下是我目前所拥有的片段。

谢谢。

标记：

<div class="mainWrapper">
  <section class="panel" id="panel-1"></section>
  <section class="panel" id="panel-2"></section>
  <section class="panel" id="panel-3"></section>
  <section class="panel" id="panel-4"></section>
</div>

CSS:

.mainWrapper, .panel {
  position: relative;
  height: 100%;
}

.mainWrapper {
  top: 0;
  left: 0;
}

.panel {
  display: inline-block;
  background: rgba(255, 255, 255, 1);
}

Javascript:

$(document).ready(function() {
  var $panelWrapper = $('.mainWrapper');
  var $panels = $('.mainWrapper').find('.panel');
  var $panelScrollPos = new Array();

  $panels.each(function(i) {
    //This is where I need help. It's not working
    $panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);

    alert('Panels position are: ' + $panelScrollPos[i]);
  });
});

Please note that I have used .width() method to set the width of .mainWrapper and .panel elements. I haven't included it in the snippet as it is working.

Answer 1

你可以试试getBoundingClientRect。

那个调用的结果有一个左边的位置，这可能就是你要找的。

Answer 2

为了能够在一行中设置您的 inline-block 元素，无论包装器的宽度如何，您都应该重置 white-space 属性：

#wrapper {
white-space:nowrap;
width:100%;
}
.child {
display:inline-block;
white-space:normal;
width:100%;
}

您的 fiddle 已更新：http://jsfiddle.net/n3e6xzbj/

当浮动元素在视口之外时，如何获取它的左偏移量？

How do I obtain a floating element's left offset while it is outside the viewport?

html

javascript

css

jquery

viewport