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

2021/01/30 23:51 · jquery ·  · 0评论

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

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

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

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

有两个DOM元素属性,用于获取元素在页面上的位置。这些属性是element.offsetTopelement.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';
    }
};

小提琴

使用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>

如果您更喜欢使用jQuery,那么下面的代码也应该起作用:

var spaceBelow = $(window).height() - $('.inner')[0].getBoundingClientRect().bottom;
本文地址:http://jquery.askforanswer.com/woxuyaozhaodaoyuansuheliulanqichuangkoudibuzhijiandejuli.html
文章标签:
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!