0

どうやって取り組むべきかわからない、いらいらする問題を抱えています。

私の質問：ビューポート（この場合はスクロール可能なdiv）の2つの位置の間に存在する要素の数を確認するにはどうすればよいですか？

<div>高さが150ピクセルのスクロール可能オブジェクトがありますが、ビューポートが450ピクセルで、その大部分が非表示になっているとします。divには、高さが30ピクセルの子があり、そのうち15個が子です。

質問2：n1とn2の間に最初の子がいくつ存在するかをどのように知ることができますか。それはかなり簡単に思えますが、そうではないことが証明されています。

解決策を部分的に解決したjsFiddleを作成しました。これは、最上位の値が0に設定されている場合は機能しますが、それ以外の場合は機能しません。たとえば、このソリューションを使用すると、0〜200pxの間に7つの表示されたdivがあることを確認できます。しかし、30pxから230pxの間の数を決定するために変更すると、0と表示されますが、これも7になるはずです。

助けてください！

4

2 に答える 2

2

代わりにこれを試してください：

var $this = $(this),
    topOffset = $this.offset().top;
if (topOffset >= top && topOffset <= bottom) {
    elements++;
}

each()これは、現在の要素の（内の）トップオフセットがtop変数の値よりも大きいかどうかを確認し、その場合にelementsのみ増加します。heightこのように、変数を絶えず更新する必要はありません。

そして、あなたがここで見ることができるように、これはうまくいきます。

于 2012-08-07T17:23:51.770 に答える
2

'height'が一番上の値と等しくなるように変更します。

JavaScriptは次のようになります。

var container = $('div#container'),
top = 30,
bottom = 230,
height = top,
elements = 0;

container.find('div').each(function(n)
{
  if (top <= height && height < bottom)
{
    height = height + $(this).height();
    elements++;
    console.log(top, bottom, height, elements);
}
});

$('span.top').text(top);
$('span.btm').text(bottom);
$('span.num').text(elements);

それは私のために働いた、頑張ってください！

于 2012-08-07T17:24:22.463 に答える