Question

如何在js中测量屏幕上div和可见高度的总高度？

例如，如果div的总高度为1000px，目前屏幕上只显示450px。

因为只有450px是可见的并且还有650px需要滚动（剩余的px），我试图在剩余的px小于100px时触发警报。

换句话说，在1000px之外，如果用户向下滚动并且剩余的px小于100px，我想触发警报。

我看到我可以使用＆＃34; .offset（）。top＆＃34;但我不太确定如何。

Answer 1

＆＃13;

var div = document.getElementsByTagName('div')[0];

window.addEventListener("scroll", function() {
  if (window.pageYOffset - div.offsetTop > 900) {
    alert('Less than 100px of div visible');
  }
});

＆＃13;

body {
  height: 2000px;
}
div {
  background-color: lightblue;
  height: 1000px;
}

＆＃13;

<div></div>

＆＃13;

window.pageYOffset是从顶部开始的当前滚动位置
div.offsetTop是div在顶部

两者之间的差异是滚动超出div顶部的像素数。超过1000px高元素顶部超过900px意味着小于100px。

<小时/> 您也可以将if更改为

if (window.pageYOffset - (div.offsetTop + div.scrollHeight) > -100) {

div.scrollHeight是div的高度，因此整个上面的表达式代表滚动超出div的底部的像素数。而-100超出底部意味着100px留给它。

js测量div的可见高度和总高度之间的差异

1 个答案: