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

Question

我似乎无法弄清楚为什么这段代码作为 while 循环和递归函数会无限运行。 我正在检查一个元素是否在视口中，如果不在，则将其父元素的顶部偏移量向上移动，直到其子元素离开视口。

HTML 结构：

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

它们都有设置的高度和宽度，并且是 display:inline-block 和可见的。

我已经有一个 jQuery 伪类来检查元素是否在屏幕外，例如 `.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

当您选择具有重复 ID 的标签时，JQuery 将不起作用。

将您的内部 div id="inner" 更改为 class="inner" 并将您的选择器更改为 $('.inner')，或者为您的内部 div 提供唯一 ID。

Answer 2

根据this，getBoundingClientRect 在某些浏览器上可能有也可能没有x 和y 属性（我刚刚在Chrome 57 上对其进行了测试，它返回了undefined）。使用left 代替x 和top 代替y，因为DOMRect 总是有它们。