如何在视口外部获取浮动元素的左偏移量？

Question

这是我的情况.我已经创建了几个并排堆叠的面板,这些面板包裹在一个主容器中.每个面板占据视口宽度和高度的100%.我的目标是当我点击各自的链接时能够水平滚动到每个面板.使用纯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]);
  });
});

请注意,我使用.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/