当检查元素是否不在屏幕上时，如果没有，则无限循环向上移动

Question

我似乎无法弄清楚为什么此代码为while循环以及作为递归函数无限运行。我正在检查视口是否存在元素，如果不是，则我将其父母的顶部偏置移至其孩子离开视口。

。

HTML结构：

<div id="outter">
    <div id="inner"></div>
    <div id="inner"></div>
    <div id="inner"></div>
</div>

它们都有设定的高度和宽度，并且正在显示：内联块和可见。

我已经有一个jQuery psuedoclass，可以检查元素是否不在屏幕外，为`.is('：offscreen'(。它可以正常工作，但是我想知道原始值是否在jQuery中的某个地方缓存。

在这里：

中

var top=1;
do{
    $('#outter').css('top', top);
    top++;  
}
while(!$('#inner').is(':offscreen'));

这是在stackoverflow上找到的屏幕psuedoclass的代码：

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
      return(
        (rect.x + rect.width) < 0  || (rect.y + rect.height) < 0 || 
        (rect.x > window.innerWidth || rect.y > window.innerHeight));
};

Answer 1

当您选择具有重复IDS的标签时，jQuery将无法使用。

将您的内部DIV id="inner"更改为class="inner"，然后将选择器更改为$('.inner')，或将您的内部divs赋予唯一ID。

Answer 2

根据 this ，getBoundingClientRect可能在某些浏览器上使用x和y属性(我刚刚在Chrome 57上进行了测试，返回undefined((。将left用作x和top的替代品作为y的替换，因为DOMRECT始终拥有它们。