ビューポートの上端に触れる要素を効率的に選択する

Question

ページがスクロールされるときに、ブラウザウィンドウビューポートの上端に触れる要素を選択する計算効率が良い方法は何でしょうか？

添付の画像を参照してください。緑の要素が選択されているのは、上端に接触しているためです。

UPDATE

これは、オフスクリーンを行っている要素をフェードすることで、私が使用します方法の例。そのページには何百ものものがあるかもしれません。 Pinterestのようなページを想像してみてください。スクロールした場合でもスクロールイベントの速度で数百のオフセットとスクロールトップを計算します。

Answer 1

これは私が思いついたものです。 scrollTopの値をキャッシュすると改善できると思いますが、これはかなり良いことです。私はboxtopsをキャッシュするためのフレームワークを含んでいますが、実装コードは含んでいません。私はdivを隠すためにスクロールダウンも実装しています。私はあなたのための運動としてアップスクロールでそれらをreshowingを残しました。

ウィンドウがスクロールされると、最後の非表示のdivが取得されます。このdivの前のすべてが既に隠されていることはわかっています。次に、 '次の要素が画面外にある間に'を使用して非表示にします。 divが画面から離れないとすぐに中止します。したがって、リスト全体を反復する時間を節約できます。

http://jsfiddle.net/kkv3h/2/

//track whether user has scrolled up or down 
var prevScrollTop = $(document).scrollTop(); 

$(document).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > prevScrollTop) { 
     //down 
     var lasthiddenbox = $('.fadeboxhidden:last'); 
     var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first'); 
     while (nextbox.length) { 
      console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop); 
      if (nextbox.offset().top < currentScrollTop) { 
       nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden'); 
      } 
      else { return; } 
      nextbox = nextbox.next('.fadebox:first'); 
     }   
    } else { 
     //up   
    } 
    prevScrollTop = currentScrollTop ; 
}); 

//create an object to hold a list of box top locations 
var boxtops = new Object; 


//gather all boxes and store their top location 
$('.fadebox').each(function(index) {  
    //you may want to dynamically generate div ids here based on index. I didn't do this 
    //because i was already using the id for positioning. 
    var divid = $(this).prop('id'); 
    boxtops[divid] = $(this).offset().top; 
    //console.log(boxtops[divid]);  
}); 

Answer 2

私はヒットテストをいくつかのクラスで判断したい要素、たとえば「hit-test-visible」などをマークすることができるというのが最善の方法だと考えています。これらの要素の場合、スクロールイベントでは、ドキュメントとのオフセットを見つけることができます。jQuery offsetを参照してください。スクロール値に基づいて、オフセットがスクロールより小さく、オフセット+要素の高さスクロールオフセットより大きい場合、要素は上端に「触れる」必要があります。