問題タブ [getboundingclientrect]

スクロール可能なブロック内の要素がユーザーに表示されている (つまり、スクロール可能な親の表示領域にある) かどうかを検出する方法は?

スクロールを持つすべての親ノードを反復処理することを含まない、普遍的な解決策はありますか?

PS 私が持っていたアイデアの 1 つは でしたが、要素のgetElementAtPoint少なくとも50%が表示されているかどうかを判断する必要がある場合、頭痛の種になります。したがって、理想的には、ソリューションには、要素の四角形とウィンドウの 2 つの四角形の間の衝突検出が含まれる必要があります。

PPS 私が思いついたもう 1 つのアイデアはscrollIntoView、問題の要素で を使用し、その位置の違いを判断してから、元の位置にスクロールして戻すことです。scrollIntoViewウィンドウと内部のスクロール可能なブロックの両方をスクロールします。

getBoundingClientRectサブピクセル精度が含まれているため、発見したばかりで本当に気に入っています。Ctrl+これにより、ユーザーがまたはCtrl+を入力した場合でも、一貫したアライメントを作成できました-。

プロパティtop、bottom、left、right& width&がありheightます。

widthインターネットでブラウザのサポートを見つけるのは簡単ですが、特にとheightプロパティについてはそうではありません。事後追加されたものと思われます。Firefox、Chrome、IE10 で動作しますが、IE8 と IE9 はどうですか? これらを便利にテストすることはできません。

テキストの高さの値を d に保存しようとしています (したがって、適切なサイズの四角形の周りに描画できます) が、ティック関数または他の場所で定義されていません。

値を保持する必要があります。（しかし、そうではありません）

だから私はティック関数（その一部）を持っています：

そして、ここで値を保存しようとしている方法（コードの下部）

グローバル化できますか？または、これらの値を保存する必要がありますか?

投稿で距離を測定するスクリプトを作成しています。たとえば、3 つの投稿がある場合:

• 投稿 1: 2 行のテキスト、次に見たい画像。
• 投稿 2:見たいだけの画像。
• 投稿 3:見たい画像 続いて 2 行。

私がこれを欲しがる理由は、Tumblr の説明がナンセンスすぎると思うからです。画像の周りのナンセンスをすべてトリミングして、スクロールを少なくするクロム拡張機能を作成しています。すべての投稿で、投稿全体を表示するボタンが表示されます。

今日の時点で、それはうまく機能しています！getBoundingClientRectウィンドウから上、左、下、右のオフセットを取得できます。1つだけ問題があります。ページ上のすべての投稿に対してすぐにそれを行うことはできません。なぜなら、投稿がドキュメントの表示部分、ブラウザーで表示している部分から 700 ピクセル以上離れている場合、GBCR によって提供されるすべての値が0.

これらの値は有効ではありません。投稿が画面に表示されないため、おそらくゼロです。また、スクロールした場合に拡張機能にサイズを取得させて、投稿がウィンドウの表示部分に入ったときに処理されるようにすることもできます。しかし、これは私の好みではありません。これは、ユーザーがスクロールするたびに JS 関数をトリガーする必要があることを意味しますが、これは悪い習慣です。DOM がロードされたときに関数を開始するので、新しい投稿が追加されると、関数がトリガーされます。

私の質問は次のとおりです。投稿が画面に表示されないときに GBCR 関数が機能することを確認するための回避策はありますか。getComputedStyleまたは、 (すべての要素を通過せずに)要素の Coordinats を取得する方法はありますか?

ある Web サイトで、body要素が設定されており、本文の最上位の要素に設定されている CSS 値position: relativeのスケールによって、本文内のコンテンツが下に移動しているように見えることがわかりました。margin-top

1. body に CSS 'position: relative' が設定されているのはなぜですか? バグを修正することを目的としていますか？要素の絶対位置を設定できない IE のバグがあったと聞きました。

2. body 内の最初の要素の「のみ」の「マージントップ」がすべての要素の位置に影響するのはなぜですか?

3. Javascript 関数 'getBoundingClientRect()' は、最上位要素に設定されたこの margin-top 値を考慮しないため、どの要素に対しても間違った値を返します。