getBoundingClientRect（）は、すべての子どもに同じ値を返します

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を持っていますオフスクリーン再：それは画面上の可視だかどうかを確認するために.thumb要素とチェックの各々上

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()ループ。そうでない場合は（bounding.right < 0）、それは複製され、.infinite-thumbs要素の末尾に追加されます。

通報

私が持っている問題は、.thumb要素の一つはbounding.rightの負の値を返した後、すべての.thumb要素が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, ... } 

しかし、すぐに最初の子要素（.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, ... } 

何が得られますか？なぜそれらのうちの1つが画面外になっているからといって、全く同じ値を持つboundingオブジェクトを返すのでしょうか？

ここで何が起こっているのか誰でも知っていますか？

注：

両方$.fn.offset()と getBoundingClientRect()と同じように$.fn.position()振る舞います。 .thumbに同じ値のセットが返されると、結果として負の値を返します。.thumb-one

Answer 1

これは、すべての親指の位置を確認する前に要素を削除するために発生します。最初の要素を削除すると、次の要素が最初にオフスクリーンになります。このようにして、すべての親指は同じ「正しい」位置になります。

解決策 「各サイクル」以外で一時的な配列を作成し、それを使ってオフスクリーンの親指を保存します。その後、サイクルの後、前と同じ方法で要素を複製、削除、追加します。