問題タブ [getboundingclientrect]

ユーザーがページ内のテキストを選択したときに、Firefox アドオン SDK を使用してパネルを作成しています。パネルは常に、選択したテキストの右下に表示される必要があるため、(コンテンツ スクリプトで) 以下を使用してその位置を取得します。

この位置はイベントで送信され、パネルの配置に使用されます。これはうまく機能しますが、次の 2 つの問題があります。

• ページのズーム レベル
• ブラウザのサイドバー

getBoundingClientRect (および getClientRects でさえも) によって返される位置はこれらを考慮していないため、サイドバーが開いている場合 (左側のサイドバーによってパネルがテキストに対して左側に移動する)、またはズームが適用されている場合、パネルには右側の位置からのオフセットがあります。 .

パネルを表示する実際の位置を常に計算する方法はありますか? (おそらく sdk/window/utils モジュールを使用していますか?)

現在、要素がビューポートに入るかどうかを調べるために getBoundingClientRect() を使用しています。私が本当にする必要があるのは、要素の 50% (または任意のパーセンテージ) がビューポートに入ったかどうかを確認することです (スクロールを確認しています)。表示されている場合は、ページ上のテキストを更新して「はい」と表示し、表示されていない場合はテキストに「いいえ」と表示します。

ロジックに頭を悩ませているように見えず、頭がおかしくなり始めています。誰か助けてもらえますか?

以下の現在のコード！

ここでわかるように、水平スクロールバーがあります...

http://codepen.io/anon/pen/rxxEQb

無限に右にスクロールできるという事実を除けば、かなりうまく機能します。

右スクロールを制限するために (アイテムがなくなったときに右にスクロールし続けることができないようにするため)、最後のボタン (id=lastButton) が右にスクロールするリンクよりも左にあることを検出したいと考えています ( id=goRightLink)。

これらのコンソール出力をコードペンに追加したので、私が見ているものに従うことができます...

数字の意味がわかりません。最後のボタン (ボタン 30) が表示されるまで右にスクロールすると、「go-right-link: 1389, lastButton: 1313」という値が表示されます (これは素晴らしいです)、しかし、ボタン 30 が画面外になるように少し左にスクロールすると、「go-right-link: 1246, lastButton: 1389」という値を使用できます。さらに奇妙なことに、もう一度少し左にスクロールすると、lastButton の負の値 (-549) が得られます。

ここでそれを痛烈に説明するよりも、codepen のコンソール出力を使用して、ボタン 30 が表示されたり表示されなくなったりするときに数値がどのように変化するかを確認する方がおそらく簡単です。

私がやろうとしているのは、それ以上のスクロール権をいつ防止する必要があるか (つまり、ボタン 30 が表示されているとき) を教えてくれる数字のパターンを確立することだけです。

どんな考えでも大歓迎です！

- - - 編集 - - - -

これに対する二次的な解決策を見つけました（getBoundingClientRect（）の理解に関する質問には答えていないため、回答として投稿していません）。結局、ul内のすべてのボタンを単純に合計しました（これにより、画面のオン/オフに関係なく幅が得られます）...

そして、右への遷移の前にこのチェックを追加します...

これは、 $("#tagUl").width() の結果が margin-left プロパティの変更に応じて変更されるためにのみ機能します (私が予期していなかったものです!)

クリックズーム（API !=ズーム）でGoogle Geo Chartsのライブラリを作成しています

svg パスの幅または高さを取得して、それらをフィルタリングし、それらの座標を配列オブジェクトに格納できるようにする必要があります。アラスカとハワイの g 要素の座標を保存できましたが、米国本土では、パスを 1 レベル深くする必要があり、どこが間違っているのかを理解するのに苦労しています。

大陸のnodeListで未定義になっています。

IE11 で getBoundingClientRect に範囲オブジェクトを使用すると、間違った数値が報告されます。実際の高さは 74 ですが、高さは 128 と報告されます。実際の上部オフセットは 35 ですが、上部オフセットは 8 と報告されます。

これは既知のバグですか? Windows ie11 で選択範囲の正確な数値を取得する方法はありますか。

参照用のスクリーンショットを次に示します。

このエラーが発生しています：

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin " http://localhost:8089 " from cross-origin frame.(…)

コンテンツ ドキュメントを使用して高さと幅にアクセスしようとすると:

これは、ユーザーが自分のコンピューターからローカル ファイルをロードするが、リモート URL をロードしない場合に機能します。

私はjqueryを使ってみました：

画像の最初のロードでは機能しませんが、画像の2回目のロードでは機能します。

URL 入力 (画像) のコンテンツ ドキュメントにアクセスする方法が必要です URL として読み込まれた svg 画像の getBoundingClientRect() メソッドにアクセスするにはどうすればよいですか?