解决方法
与其他系统不同,浏览器中的坐标是从上到下,这意味着浏览器的顶部是y = 0.
有两个DOM元素属性用于获取页面上元素的位置.属性是element.offsetTop和element.offsetHeight
您可以通过计算element.offsetTop和window.innerHeight来计算元素和页面底部之间的空间.
var space = window.innerHeight - element.offsetTop
如果要计算元素底部和窗口底部之间的空间,那么您还需要添加元素高度.
var space = window.innerHeight - element.offsetTop + element.offsetHeight
这个计算有时是必要的.认为您有基于百分比的定位,并且想要通过像素知道元素的位置来做某事.例如,你有一个这样的位置：
div{
width:300px;
height:16.2%;
position:absolute;
top: 48.11%;
border:3px dotted black;
}
那么你想知道div在什么时候靠近浏览器窗口来改变它的颜色：
var div = document.querySelector('div'),space = innerHeight - div.offsetTop + div.offsetHeight;
window.onresize = function(){
space = innerHeight - div.offsetTop + div.offsetHeight;
if(space < 200){
div.style.background = 'blue';
}
};
