Javascript 如果第一个子元素有任何负值，则getBoundingClientRect（）为所有子元素返回相同的值

上下文

我正在构建一个无限的图像水平卷轴：

<div class="infinite-thumbs">
    <img src="1.jpg" class="thumb thumb-one">
    <img src="2.jpg" class="thumb thumb-two">
    <img src="3.jpg" class="thumb thumb-three">
    ...
    <img src="10.jpg" class="thumb thumb-ten">
</div>

<style lang="stylus">

    .infinite-thumbs
        position absolute
        width 100%
        height 180px
        bottom 40px
        white-space nowrap
        overflow auto
        overflow-y hidden

    .thumb
        position relative
        display inline-block
        width 200px
        height 180px

</style>

因此，

scrollUpdate（）

在每个

.thumb

元素上循环并检查它是否在屏幕上可见。如果它不是（

bounding.right<0

），那么它将被克隆并附加到

.infinite thumbs

元素的末尾

问题

我遇到的问题是，一旦

.thumb

元素之一为

边界返回负值。right

所有

.thumb

元素返回完全相同的

边界值集

因此，当所有内容都可见时，我会在控制台中看到：

.thumb-one: { top : 0, right : 200, ... }
.thumb-two: { top : 0, right : 400, ... }
.thumb-three: { top : 0, right : 600, ... }
...
.thumb-ten: { top : 0, right : 2000, ... }

.thumb-one: { top : 0, right : -1, ... }
.thumb-two: { top : 0, right : -1, ... }
.thumb-three: { top : 0, right : -1, ... }
...
.thumb-ten: { top : 0, right : -1, ... }

但是，一旦第一个子元素（
.thumb one
）获得负的
边界。right
值，我就会在控制台中得到：

.thumb-one: { top : 0, right : 200, ... }
.thumb-two: { top : 0, right : 400, ... }
.thumb-three: { top : 0, right : 600, ... }
...
.thumb-ten: { top : 0, right : 2000, ... }

.thumb-one: { top : 0, right : -1, ... }
.thumb-two: { top : 0, right : -1, ... }
.thumb-three: { top : 0, right : -1, ... }
...
.thumb-ten: { top : 0, right : -1, ... }

有什么好处？为什么仅仅因为其中一个不在屏幕上，它们就返回一个具有完全相同值的
bounding
对象

有人知道这是怎么回事吗





注意：

$.fn.offset（）
和
$.fn.position（）
的行为方式与
getBoundingClientRect（）
；它们分别返回相同的值集
.thumb
一次
。thumb one
的结果为负值

之所以会发生这种情况，是因为在检查所有拇指位置之前移除了该元素。删除第一个元素会导致下一个元素成为第一个，并离开屏幕。这样，每个拇指都将处于相同的“正确”位置

解决方案
在“每个”周期之外创建一个临时数组，并使用它保存屏幕外的拇指。然后，在循环之后，以与之前相同的方式克隆、删除和附加元素。大概是这样的：

function scrollUpdate() {
    var offScreenElements = [];
    $('.thumb').each(function() {

        var bounding = $(this)[0].getBoundingClientRect();

        if (bounding.right < 0) {
            offScreenElements.push($(this));
        }
    });
    $.each(offScreenElements, function(index, element) {
        element.clone(true).appendTo('.infinite-thumbs');
        element.remove();
    });
}

函数滚动更新（）{
var offscreeneElements=[]；
$（'.thumb'）。每个（函数（）{
var bounding=$（this）[0]。getBoundingClientRect（）；
if（bounding.right<0）{
OffscreeneElements.push（$（此））；
}
});
$.each（offscreeneelements、function（index、element）{
element.clone（true）.appendTo（'.infinite thumbs'）；
元素。移除（）；
});
}
通过禁用
$.fn.clone（）
和
$.fn.remove（）
的快速测试表明您已经掌握了一些东西！我会继续下去…我已经添加了一些代码（未经测试，但我认为您可以使用它来实现您的目标）工作起来非常有魅力！谢谢阿尔贝托，救了我在那里发疯；）