有没有办法让元素相对于vewport的底部位置？

Question

我正在寻找这个（因为环境只能这样做）并且我需要获得div底部相对于视口底部的距离（如20px意味着div的底部高于视口底部20px，负值将是用户滚动到div底部的距离。）

更新：

请不要jquery

这是一张可能更好理解的照片

Answer 1

通过将顶部位置添加到高度，获取要监视的元素和窗口（视口）的底部位置，然后从窗口的底部值中减去元素的底部值。

＆＃13;

＆＃13;

N

＆＃13;

var foo = document.getElementById('foo');

window.addEventListener('scroll',function() {
  var fooTop = foo.offsetTop,
    fooHeight = foo.offsetHeight,
    fooBottom = fooTop + fooHeight,
    st = window.scrollY,
    wh = window.innerHeight,
    wb = st + wh,
    distance = wb - fooBottom;
  console.log(distance);
})

＆＃13;

section {
  min-height: 100vh;
}
#foo {
  background: red;
}

＆＃13;

＆＃13;

＆＃13;