2

バウンディング ボックスが完全に表示されていないページのすべての要素を非表示にする方法はありますか。

含まれている要素の高さが動的ですが、オーバーフローが非表示になっているテーブル行のリストがあります。

リスト内のアイテムの半分が含まれている要素の境界と重なることがあります。CSS または JavaScript を使用してこれらを非表示にできることを期待していました。

うまくいけば、画像でこれをよりよく説明できます。ここでは、ボックス 24 を非表示にします。

重なり合う要素

私が持っている 1 つのアイデアは、すべての要素を反復処理し、その境界を見つけて、それらがコンテナーの境界と重なっているかどうかを確認することです。これは非常に重くて厄介な方法のようです (特に、これはスクロール リストであり、毎秒計算する必要があるため)。より良い方法はありますか？

ありがとうございます。何か明確にする必要がある場合はお知らせください。

アップデート：

これを一般的なものにして、さまざまなマークアップ構造で動作するようにしたいのですが、使用しているコードの簡単な例として (この場合、最初のものだけが表示されると思います):

<style>
  #parent {height: 100px; overflow: hidden; }
  .child {height: 75px;}
</style>

<div id='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
4

3 に答える 3

0

コンテナのoffsetHeightが実際の高さを与えると思うので、各行のoffsetTop + offsetHeightと比較して、必要に応じて最終的に非表示にすることができます。ちょっとしたアイデア...行にある親コンテナーの数に応じて、いくつかの調整が必要になる場合があります。

于 2012-05-29T15:52:57.263 に答える
0

を計算してtop offset + height、結果の値がコンテナの高さより大きいかどうかを確認できます。含まれている場合、その要素とそれ以降の残りのアイテムは、コンテナーの境界を超えています。

于 2012-05-29T15:51:58.270 に答える
0

http://jsfiddle.net/VhShD/document.elementFromPointでしばらく遊んだ後、これはあまり良い考えではないと思います。

より良いアプローチは、スクロールを特定の増分に制限することです。これにより、スクロールするたびにスクロールが最小限になり、少なくとも1つの新しいアイテムが完全に表示または非表示になります。これは、少なくとも WinAmp プレイリストで使用されます。

残念ながら、scrollイベントは最悪です。ユーザーがスクロールしたい情報や、スクロールを防ぐ機能は含まれていません。jScrollPane のような完全にカスタムのスクロール ソリューションを使用する必要があります。

于 2012-05-29T16:24:33.137 に答える