問題タブ [getboundingclientrect]

アプリのさまざまな部分からイオンモーダルにポップアップする再利用可能な同意フォームコンポーネントがあり、クライアントが受け入れている/拒否している特定の同意または合意に応じて異なるテキストが入力されます (利用規約/ユーザー合意/コンプライアンスのもの/等。）。

テキスト/サブテキストの最後に、スクロール チェックポイントとして div があります。

契約/同意に同意するボタンには、[disabled]="!canAccept" プロパティ バインディングがあり、ユーザーが契約に含まれるテキストを読んだことを確認します。

私の .ts ファイルでは、次の要素を viewchild します。

また、canAccept 変数を設定/設定解除する 2 つの方法があります。

と

また、ロード時に初期チェックを行うionViewDidLoadメソッドがあることにも言及する必要があります。

これは Android または Web で完全に機能し、ユーザーがテキストをスクロールするまでボタンは有効として表示されません。

問題は、すべてのテキスト (およびスクロール div) が既に表示されている場合でも、ボタンをアクティブにするために、ユーザーが (ほんの数ピクセルでも) スクロールすることを強制される iOS にあります。テキストがすべてウィンドウに既に含まれている場合、ボタンをアクティブとして表示したいのは明らかです。

これは非常に些細なことですが、ここで最高のユーザーエクスペリエンスを得ようとしています. 他の誰かがこの問題に遭遇したか、回避策/解決策を知っていますか?

に追加したばかりgetBoundingClientRect()の要素の を取得しようとしていますが、0が返されます。現在、同じ画像を含む html に SVG を追加する問題を修正し、可視性を非表示に設定してから、幅とそこからの高さ。オブジェクトのサイズはウィンドウ サイズのパーセンテージであるため、事前に知る方法はありません。objectbodywidthheight

幅と高さを取得するためだけに、ボディに SVG を追加したくありません。どのようにできるのか？

HTML テキストとテキストを含む SVG ドキュメントがあり、外部オブジェクトとして含まれています。HTML テキストと SVG ドキュメント内のテキストのサイズを同じに保ちたい。

SVG ドキュメント内のテキスト サイズの変更は正常に機能しますが (私は d3.js を使用しています)、最初のステップとして、ユーザーに表示されるテキスト サイズが必要です。ブラウザ ウィンドウのサイズを変更するか、SVG オブジェクトの「幅」を変更すると、HTML テキストのサイズは一定のままですが、SVG 内のテキストのサイズは比例して変化します。

ユーザーに表示されるテキスト サイズを測定するために、「getComputedStyle」と「getBoundingClientRect」の両方を試しました。getBoundingClientRect は問題なく動作しますが、getComputedStyle は、スケーリングに関係なく、SVG ドキュメント内で定義されたテキスト サイズを常に教えてくれます。

原則として、「getBoundingClientRect」で問題ありません。唯一の欠点は、これには常に SVG 内に水平テキスト要素が必要であり、これは私のすべての SVG ドキュメントには当てはまらないことです。もちろん、透明な横長のサンプル テキストを紹介することもできます。

私は、それはあまり賢くないと感じています。たぶん、より良い解決策があります。