Question

我正在使用scrollTop方法处理一些jquery代码来实现无限滚动（请不要建议jQuery插件，我知道它们存在）并且我不太明白这是什么价值意味着。

<div id="outter">
  <div class="inner"></div>
  <div class="inner"></div>
</div>
<div id="scroll"></div>

#outter {
  height: 100px;
  width: 100%;
  overflow-y:auto;
}

.inner {
  height: 150px;
  width: 50%;
  border: dashed black 2px;
  background-color: grey;
}

当滚动条位于元素的最顶部时，值为0，但为什么＆＃34; 208＆＃34;什么时候在底部？ #outter div为100px高，其内容略高于300px。

Answer 1

@Rory McCrossan所说的话。如果向下滚动100px，.scrollTop将显示100。 scrollTop将测量窗口和元素之间的空间。因此，你的元素有多高并不重要，它始终是它上面的空间。

由于您的.inner缺少css-rule box-sizing: border-box;，因此边框将添加到div之外，并且宽度为2px。在您的情况下，每个.inner元素的高度为154px。您有2个，因此.outer的内容为308px。

您的.outer - 元素高100像素，因此100px始终可见。因此，当您的窗口滚动到最底部时，scrollTop显示308px - 100px = 208px。

如果您将.outer更改为50px的高度，当滚动到底部时，scrollTop将显示258px。

Answer 2

$.scrollTop：

垂直滚动位置与像素数相同隐藏在可滚动区域上方的视图中。如果滚动条是在最顶部，或者如果元素不可滚动，则此数字将为是0。

检查你的小提琴，你可以看到你的两个.inner的总高度为308像素。你的外（滚动）div是100 px高。

因此，您的.scrollTop()，在可滚动区域上方隐藏的像素数为total inner height - visible height或208像素。

jQuery scrollTop值是什么意思？

2 个答案: