在前端开发中，我们常常需要获取页面的滚动位置，以便实现一些交互效果或者监听用户行为。而在jQuery中，我们可以使用$(window).scrollTop()方法来获取当前页面的垂直滚动距离，但是却没有相应的方法来获取底部的滚动距离。
为什么没有$(window).scrollBottom()？
这个问题并不是jQuery本身的问题，而是由于底部滚动距离的计算方式比较复杂，无法直接通过浏览器提供的API来实现。相比之下，获取顶部滚动距离就比较简单了。
如何计算底部滚动距离？
要计算底部滚动距离，我们首先需要知道以下几个值：
- 页面文档的高度（documentHeight）
- 可视区域的高度（viewportHeight）
- 当前滚动位置的距离（scrollTop）
那么，底部滚动距离就等于 documentHeight - viewportHeight - scrollTop。
下面是一个示例代码：
function getScrollBottom() {
var documentHeight = $(document).height(),
viewportHeight = $(window).height(),
scrollTop = $(window).scrollTop();
return documentHeight - viewportHeight - scrollTop;
}应用场景
有了底部滚动距离的计算方法，我们就可以在一些场景中使用了。比如：
1. 懒加载
当页面滚动到底部时，我们可以通过监听滚动事件来判断是否需要进行懒加载，以此优化页面性能。
$(window).on('scroll', function() {
if (getScrollBottom() < 100) {
// 进行懒加载
}
});2. 瀑布流布局
瀑布流布局需要根据每个元素的高度来判断它们的位置，而这个高度往往需要等到图片等资源加载完成后才能获取。因此，我们可以在图片加载完成后重新计算容器的高度，并根据高度差来调整位置。
-- -------------------- ---- -------
------------------- ---------- -
--- ---------- - ----------------
---------- - -----------------
--------- - ----------------------------- - -----
--------------------------------- ------- -
------ ------ - -----------
---
----------------
---- ------------------- - -----------
----- ------------------ - ---------- - ---
---
---总结
尽管jQuery没有提供$(window).scrollBottom()方法，但我们可以通过简单的计算方法来实现。底部滚动距离在一些场景中非常有用，比如懒加载和瀑布流布局等。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12511