javascript - 当 float 元素在视口(viewport)之外时，如何获取它的左偏移量？

Question

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

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

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

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

那么我该如何解决这个问题呢？看起来我是在重新发明轮子，但正如我所说，我正在学习 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

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

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

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