※ ChatGPTを利用し、要約された質問です(原文:onresizeイベントのタイミング)
onresizeイベントのタイミング
このQ&Aのポイント
onresizeイベントのタイミングでブラウザの再表示が行われるため、ブロックの高さを正しく調整することが難しい
onresizeではフラグを立てるだけにし、再表示後にブロックの高さを調整する代案が考えられる
IEのみの環境であるため、ブラウザの表示状態を見てブロックの高さを決める方法を検討する
比較的単純な表形式の表示をするHTMLを作成しています。
上段の項目タイトルなどの部分を固定しておいて、下のデータ群は上下スクロールで見るという使い方ができるように、上下のブロックに分けて表示しています。(エクセルの「ウインドウ枠の固定」のイメージです)
画面をリサイズした際に、セル内の文字数によっては高さが変わってしまう場合があるので、ブロックの高さの調整が必要になってきます。
表示の横幅を固定してしまえば調整が不要になるのはわかっていますが、HTMLということもあり、全体幅100%などの相対指定やある項目幅のみの指定など、部分的な指定のみであとはブラウザ側にまかせる表示方法をとっています。(表の種類がいろいろあるので、全部を計算で決めるのが面倒ということもありますが。)
そこで調整するために、画面リサイズの際にonresizeでJavaScriptによる調整をしようと考えましたが、onresizeではブラウザが再表示する前にイベントが発生するようです。
一方、調整するのにはブラウザの表示状態を見てブロックの高さ決めているため、このタイミングだと正しく調整ができません。(項目とデータの間にマーカーを入れておいて、その位置を計ることでブロックのサイズを割り出しています。)
代案として、onresizeではフラグを立てるだけにして、画面上にマウスが戻った時に(再表示後と見て)改めてブロックの高さを調整するという少々回りくどい方法を考えました。
一応、これでなんとかなってはいますが、リサイズ後に画面外にマウスがあるままだと調整前の表示のままになってしまうという欠点があります。
そこで質問ですが、もう少しスマートな対応のアイデアはないでしょうか?
ブラウザはIEのみの環境ですので、IE限定でかまいません。
お礼
なるほど! ブラウザの表示時間との関係で、Timeoutの設定をどのくらいにするかが微妙そうですが、私のアイデアよりもはるかにスマートですね。 ありがとうございます。
補足
早速実験してみたところ、うまくいきました。 軽いデータで実験したので1ミリ秒でも全く問題ありませんでしたが、安全をみて、視覚的に問題がなさそうな10ミリ秒くらいで仮設定してみることにしました。 ありがとうございました。 面白いことにIEでは最初はタイマーが効きませんでした。(数字に関わらず1ミリ秒くらいで実行していたらしい・・) onresize="setTimeout(調整関数,タイム);"のセミコロンを入れたらば、やっと待ち時間が正しく解釈されました。