Question

我需要找到元素和浏览器窗口底部之间的距离。

当我选择元素，并且元素和浏览器窗口底部之间的距离小于50px时，我想让窗口自动滚动。

有什么想法吗？我更喜欢使用jQuery。

Answer 1

与其他系统不同，浏览器中的坐标是从上到下，这意味着浏览器的顶部是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：

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';
    }
};

Fiddle

Answer 2

使用element.getBoundingClientRect()是获得元素底部偏移的一种很好的直接方法，它相对于视口而不是文档。然后，您可以从window.innerHeight中减去此值，以计算元素与浏览器窗口底部（视口）之间的剩余空间。如下例所示：

＆＃13;

var element = document.querySelector('.inner');

window.onscroll = function() {
    var domRect = element.getBoundingClientRect();
    var spaceBelow = window.innerHeight - domRect.bottom;
    
    element.style.background = (spaceBelow < 50 ? 'blue' : 'transparent');
};

＆＃13;

body {
  height: 1000px;
}

.outer {
  position: absolute;
  top: 120px;
  border: 1px dashed green;
  width: 95%;
  height: 80px;
}

.inner {
    width:300px;
    height:16.2%;
    position: absolute;
    top: 48.11%;
    border:3px dotted black;
}

＆＃13;

<div class="outer">
  <div class="inner"></div>
</div>

＆＃13;

如果您更喜欢使用jQuery，那么以下代码也可以使用：

var spaceBelow = $(window).height() - $('.inner')[0].getBoundingClientRect().bottom;

我需要找到元素和浏览器窗口底部之间的距离

2 个答案: