jQuery的scrollTop值是什么意思?

What does the jQuery scrollTop value mean?

本文关键字：意思 是什么 scrollTop jQuery      更新时间：2023-09-26

我正在编写一些jquery代码，使用scrollTop方法来实现无限滚动(请不要建议使用jquery插件，我知道它们存在)，我不太明白这个值是什么意思

给定这个小提琴:https://jsfiddle.net/ve8s5fdx/

<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是有意义的，但是为什么当滚动条位于元素的底部时，值为"208"?#outterdiv高100px，内容略大于300px。

@Rory mcrossan说的话。如果向下滚动100px， . scrolltop将显示100。scrollTop将测量窗口和元件之间的空间。所以不管你的元素有多高，重要的总是它上面的空格。

因为你的.inner是缺少css-规则box-sizing: border-box;的边界将被添加到div之外，它是2px宽。在你的例子中，这意味着每个.inner元素都是154px高。你有两个，所以.outer的内容是308px。

你的.outer -元素是100px高，所以100px总是可见的。所以当你的窗口滚动到最底部时，scrollTop显示308px - 100px = 208px。

如果你改变你的.outer的高度为50px, scrollTop将显示258px当滚动到底部

$.scrollTop:

垂直滚动条的位置与显示的像素数相同隐藏在可滚动区域上方的视图中。如果滚动条为在最上面，或者如果元素不可滚动，这个数字将会滚动是0。

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

那么你的.scrollTop()， 在可滚动区域的上方隐藏的像素数是total inner height - visible height，或者208px

相关文章：