getBoundingClientRect() returns 所有 children 的相同值，如果第一个 child 有任何负值

Question

背景

我正在构建无限水平的图像滚动：

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

在此处了解有关手写笔的更多信息：stylus-lang.com

然后我有一些 jQuery/JS 来处理图像的克隆和附加，当它们是 off-screen:

function scrollUpdate() {

    $('.thumb').each(function() {

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

        if (bounding.right < 0) {
            var $el = $(this);
            $el.clone(true).appendTo('.infinite-thumbs');
            $el.remove();
        }

    });

}

$('.infinite-thumbs').on('scroll', function () {
    window.requestAnimationFrame(scrollUpdate);
});

因此 scrollUpdate() 遍历每个 .thumb 元素并检查它是否可见 on-screen。如果不是 (bounding.right < 0)，那么它会被克隆并附加到 .infinite-thumbs 元素的末尾。

问题

我遇到的问题是，一旦 .thumb 元素之一 return 为 bounding.right all 的负值 .thumb 元素 return 完全相同的一组 bounding 值。

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

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

但是一旦第一个 child 元素 (.thumb-one) 获得负 bounding.right 值，我就会在我的控制台中得到这个：

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

什么给了？为什么他们都 return 一个 bounding object 具有完全相同的值只是因为其中一个是 off-screen?

有人知道这里发生了什么吗？

注意：

Both $.fn.offset() and $.fn.position() behave in the same way as getBoundingClientRect(); they return the same set of values for each .thumb once .thumb-one has a negative value in its result.

Answer 1

这是因为您在检查所有拇指的位置之前删除了元素。删除第一个元素会导致下一个元素成为第一个元素，离开屏幕。这样，每个拇指都会占据相同的 'right' 位置。

解决方法 在 'each' 循环之外创建一个临时数组，并用它来保存屏幕外的缩略图。然后，在循环之后，以与之前相同的方式克隆、删除和追加元素。像这样：

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();
    });
}

getBoundingClientRect() returns 所有 children 的相同值，如果第一个 child 有任何负值

getBoundingClientRect() returns same values for all children if first child has any negative value

javascript

jquery

getboundingclientrect