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

I need to find the distance between the element and the bottom of the browser window

提问by user979582

I need to find the distance between the element and the bottom of the browser window.

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

When I select the element, and the distance between the element and the bottom of the browser window is smaller than 50px, I want to make the window scroll automatically.

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

Any ideas? I'd prefer to use jQuery.

有任何想法吗？我更喜欢使用jQuery。

回答by Mohsen

Unlike other systems coordinates in browser is from top to bottom, it means top of the browser is y=0.

不同于浏览器中的其他系统坐标是从上到下，这意味着浏览器的顶部是 y=0。

There is two DOM element property for getting position of an element on the page. The properties are element.offsetTopand element.offsetHeight

有两个 DOM 元素属性用于获取页面上元素的位置。属性是element.offsetTop和element.offsetHeight

You can calculate the space between your element and bottom of the page by calculating element.offsetTopand window.innerHeight.

您可以通过计算element.offsetTop和来计算元素和页面底部之间的空间window.innerHeight。

var space = window.innerHeight - element.offsetTop

if you want to calculate space between bottom of your element and bottom of the window then you need to add your element height too.

如果要计算元素底部和窗口底部之间的空间，则还需要添加元素高度。

var space = window.innerHeight - element.offsetTop + element.offsetHeight

This calculation is sometimes necessary. Think you have percent based positioning and you want to know position of your element by pixels to do something. For example you have a div positioned like this:

这种计算有时是必要的。认为您有基于百分比的定位，并且您想通过像素知道元素的位置来做某事。例如，你有一个这样定位的 div：

div{
    width:300px;
    height:16.2%;
    position:absolute;
    top: 48.11%;
    border:3px dotted black;
}

Then you want to know when the div is close to browser window to change it's color:

然后您想知道 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

小提琴

回答by Simon Watson

Using element.getBoundingClientRect()is a nice straight forward way to get the offset of the bottom of the element which is relative to the viewport rather than the document. Then you can just subtract this value from window.innerHeightto calculate the remaining space between the element and the bottom of the browser window (viewport). Like in the example below:

使用element.getBoundingClientRect()是一种很好的直接方法来获取元素底部相对于视口而不是文档的偏移量。然后你可以减去这个值window.innerHeight来计算元素和浏览器窗口底部（视口）之间的剩余空间。就像下面的例子：

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

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

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

If you prefer to use jQuery then alternatively the following code should also work:

如果你更喜欢使用 jQuery，那么下面的代码也应该可以工作：

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