如何获得浮动元素的左偏移量，而该元素位于视图端口之外？

Question

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

当面板被堆叠在另一个下面(即垂直)时，我能够获得每个面板的顶部偏移量，并很好地滚动到它们的位置。

随着水平变化，我有困难，以获得左偏移的面板。我得到他们的左偏移量为零。如果我的逻辑是正确的，假设视口是192 at宽，那么第二面板的左偏移量应该在192 at，第三面板应该是3840 at，等等。

从我收集到的信息来看，这是因为面板在视口之外。事实上，我在面板上加了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]);
  });
});

请注意，我使用了.width()方法来设置.mainWrapper和.panel元素的宽度。我还没有把它包括在代码片段中，因为它正在工作。

Answer 1

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

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

你的小提琴更新：http://jsfiddle.net/n3e6xzbj/

Answer 2

你可以试试getBoundingClientRect。

那个电话的结果有一个左边的位置，这可能就是你想要的。