Javascript 如何获得浮动元素'；当左偏移位于视口外时，它是否向左偏移？

这是我的情况。我已经创建了几个并排堆放的面板，它们被包装在一个主容器中。每个面板采用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>

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

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

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

$(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]);
  });
});

Javascript:

<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>

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

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

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

$(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（）方法来设置 .main包装和.panel元素。我没有将它包含在代码段中，因为它正在工作

你可以试试这个

---

该调用的结果有一个左位置，这可能就是您所寻求的。

要能够在一行上设置

内联块

元素，无论包装的宽度如何，您都应该重置

空白

属性：

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

---

你的提琴更新了：

你正在JS中提醒

$panelWrapper[i]

。这不应该是

$panelScrollPos[i]

？此外，您的CSS中的

.panel

div没有宽度。如果我们有您正在设置的宽度，您的CSS将更容易。例如，您的主包装宽度是否与四个面板宽度之和一样宽？也许可以使用fiddle->set white space to no wrap将内联块面板保持在一条线上，无论父面板的宽度如何。请参见我的意思：）（这也包括其他注释提示）感谢分享此方法。以后肯定会很方便的。GCyrillus CSS提示帮助了我。谢谢你的帮助！然而，有些事情还不清楚。。。这些

内联块

元素在离开视口时不是“真的”在一行中吗？我问这个问题是因为最初，当我在CSS文件中设置子元素的宽度时，我试图减小它们的宽度，以检查它们是否并排…它们确实并排。我还注意到，如果我应用了

float:left空白

属性不再起作用。@Christopher空白仅适用于内联、内联块（或类似于输入/img）和文本。Float有一个特殊的行为，它的行为类似于绝对元素（从常规流中取出），但仍然在元素流中使用空间。它确实远离它为该行为覆盖的任何显示值。请在此处检查此项&@Christopher