Question

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

HTML结构：

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

它们都设置了高度和宽度并显示：内联块和可见。

我已经有了一个jQuery伪造的类，可以检查一个元素是否在屏幕外，如`.is（＆＃39;：offscreen＆＃39;）。它运行正常，但我想知道原始值是否在jQuery中缓存。

代码中的代码：

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

这是在StackOverflow上找到的offscreen伪造类的代码：

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

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

Answer 2

当你选择带有重复ID的标签时，JQuery不会工作。

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

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

2 个答案: