jquery中是否可以找到从底部到当前滚动状态的距离

Question

假设已向下滚动到网页的中间。

是否可以找到距底部的距离（以长度或像素为单位）？

就像当滚动条到达底部时，它的值是 0，但如果它距离底部 500px，那么我需要那个 500px 值。

Answer 1

对于整个页面：

let scrollPosition = window.pageYOffset;
let windowSize     = window.innerHeight;
let bodyHeight     = document.body.offsetHeight;

alert(Math.max(bodyHeight - (scrollPosition + windowSize), 0));

对于特定元素：

let scrollDistanceTotal      = el.scrollHeight - el.clientHeight;
let scrollDistanceFromBottom = scrollDistanceTotal - el.scrollTop;

Answer 2

也试试这个：

$(document).height() - ($('body').height() + $('body').scrollTop())

Answer 3

调整 rkleine 的答案。我发现它实际上是这样的：

$(document).height() - ($(window).height() + $('body').scrollTop())

即 $(window) 表示高度而不是 $('body')

Answer 4

这是普通 JS 中的代码：

var distanceFromBottom = document.body.scrollHeight - window.innerHeight - window.scrollY

Answer 5

var distanceFromBottom = $(document).height() - $(window).height() - $(document).scrollTop();

Answer 6

我必须进一步调整以前的答案才能使其工作：

distFromBottom = $(document).height() - $(window).scrollTop() - $(window).height();

只是将其分解：

let bottomToWinTop = $(document).height() - $(window).scrollTop();

这获取从文档底部到窗口顶部的距离。
由于窗口高度会有所不同，因此减去当前窗口高度即可得到距底部的偏移量

let bottomToWinBottom = bottomToWinTop - $(window).height();

现在，当用户完全向下滚动页面并向上滚动时，bottomToWinBottom = distFromBottom = 0，它的值是距离位于窗口下方，可以很好地指示垂直位置。