問題タブ [getboundingclientrect]

私の目標は、要素がビューポートに表示される直前に要素を挿入することです (遅延データ属性に応じて、要素がビューポートに表示される前のデフォルトは 100px です)。そして、私がそれを行う方法は、getBoundingClientRect();

そして、私はそれをこのように使用します

私が見つけた主なことの1つは、（コンソールログと$(window).scrollTop()一緒にコンソールログを記録したときTestBox.isOnScreen(element)：要素がビューポート上にあることが検出された瞬間は常に正確であるとは限りません.14px、5px、または正確に良い場合もあります.

誰もこの問題を経験したことがありますか? それとも私はそれを間違って実装していますか？

DOMRectドキュメントによると、幅と高さは負になる可能性があります

width ディメンション長方形の幅。負になる可能性があります。

高さ寸法長方形の高さ。負になる可能性があります。

負の幅または高さの値がどのように発生するかを説明できますか?

私はgetBoundingClientRectこれを次のように使用しようとしています: DOM 要素が現在のビューポートに表示されているかどうかを確認するにはどうすればよいですか?

しかし、私はそれを機能させることができず、明らかに何か間違ったことをしています。何を教えてください。

HTML:

JS:

getBoundingClientRect()実際に計算せずに要素の長方形が変更されたことを検出する方法はありますgetBoundingClientRect()か? 「汚い旗」のようなもの？単純に、ブラウザの内部動作のどこかにそのようなメカニズムがあるに違いないと思いますが、DOM API で公開されているものを見つけることができませんでした。MutationObservers でこれを行う方法はありますか?

私のアプリケーションは、DOM 要素をグラフのノードに変換し、エッジを全画面キャンバスに描画する Web コンポーネントです。ここを参照してください。

現時点ではgetBoundingClientRect()、何も変更されていない場合でも、アニメーション フレーム フレームごとに 1 回、すべての要素を呼び出しています。高価な感じです。私は通常、60 fps でかなり強力なコンピューターで %15-%50 の CPU 使用率を得ています。

誰かそのようなことを知っていますか？このようなことを期待するのは合理的だと思いますか? このようなことは実現可能ですか？以前に提案されたことはありますか？

私は次の階層を持っています:

次の目的で、これらのそれぞれを変数に入れようとしています。

現在、次のように動作します。

ただし、次の場合は除きます。

変数で first-child または nth-child を使用するにはどうすればよいですか?

現在、Element.getBoundingClientRect()要素の位置とサイズを指定しますが、CSStransformプロパティを介して変換を自動的に考慮します。変換せずに長方形を取得するにはどうすればよいですか?

以下の例では、出力を にしたいと思います10 10 100 100。