モーダル画面でスクロールバーをできるだけ出さないようにする

2015/08/20

IEのモーダル画面でダイアログの横幅とbodyの横幅を同じにしていると、縦スクロールバーが出た時にスクロールバーに幅をとられて、横スクロールバーまで表示されてしまう。
横スクロールバーが表示されるだけならまだしも、中央位置がずれることで画面左側が切れてしまうことも。

これを解決するには、常に縦スクロールバーを表示して、縦スクロールバーの幅分のスペースを確保するという選択肢もあるが、今回は画面に表示する内容を(ディスプレイの大きさが許す限り)スクロールバーなしで表示できるように自動的にモーダルダイアログのサイズを変更できるようにする。
解像度の低いPCユーザや拡大表示しているユーザにも対応できる。

通常であれば、画面のサイズを動的に変更するのはWebブラウザではユーザビリティの観点等からNGだが、業務システムでモーダルダイアログを表示するという要件であれば、サイズが動的に変わってもユーザビリティは損なわれない。

方法:
・親画面
やることは特になし。dialogWidth、dialogHeightは適当に指定してOK。

・子画面
JavaScriptで内容の縦横のサイズを取得して、dialogWidth、dialogHeightを書き換える。

もしモーダル画面ではなく、window.openで開いている子画面であれば、window.dialogWidthではなく、window.resizeBy(x, y)で動的に画面を変更することができる。
※ x = document.documentElement.scrollWidth - document.documentElement.clientWidthであとどれだけ幅を増やせばスクロールバーを消せるかを計算できる。

なお幅、高さを取得するのに使用しているプロパティと、関連プロパティは以下の通り。

offsetWidth
offsetHeight
width(またはheight) + padding + borderを返す。
clientWidth
clientHeight
width(またはheight) + paddingを返す。要素の内容を表示する領域の幅と高さ。
scrollWidth
scrollHeight
width(またはheight) + paddingを返す。画面上に表示されていない要素の内容も含む幅と高さを返す。
要素の内容がスクロールバーを生成しなければ、scrollプロパティは、 clientのプロパティ値と同じ。

参考:
http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
http://it-memorandum.seesaa.net/article/190143841.html
http://kaelab.ranadesign.com/blog/2010/10/javascript-5.html

-JavaScript