1

このstyleCLassが適用されたパネルを持つビューがあります。

.scrollPanel { 幅:100%; 高さ: 375px; オーバーフロー: 自動;}

そのパネルは、拡張ページ アプリケーション コントロールでネストされています。

パネルのスクロールバーが表示され、ブラウザのスクロールバーがアクティブにならないように、パネルの高さと幅の両方を設定したい。

この CSS は、幅に対して完全に機能します。ブラウザー ウィンドウのサイズを変更でき、必要に応じてパネルの幅が調整され、ブラウザーの水平スクロール バーが表示されません。

しかし、高さを 100% にしようとすると、同じようには機能しません。高さのサイズを変更すると、ブラウザの垂直スクロール バーが表示されます。

また、パネルの高さが常に利用可能な画面の高さと同じであると便利です。100% では、ビューが折りたたまれている場合、高さが非常に小さくなります。ビューを拡大すると、高さも拡大します。ブラウザの利用可能な高さと常に同じサイズのパーセンテージにしたいと思います。

PS私が持っている375のセットサイズは、ブラウザでサイズ変更されないことを除いて完全に機能します。

これを行う方法はありますか？

4

1 に答える 1

0

ウィンドウの実際のサイズを取得し、それに応じてパネルを変更する window.onresize イベントを登録する必要があります (スタイルで高さを設定するなど)。

したがって、最小値と最大値を考慮して、ウィンドウのサイズに応じてパネルのサイズを変更するメソッドを作成するのが最善の方法です。その関数が終了したら、ビューポートの表示サイズが変更されたときに発生する onresize イベントに登録するだけです (読み取り、実際のサイズ変更、またはウィンドウのスクロールバーを有効にする何か)。

完璧な世界では、このメソッドの実行を最大でも 100 ミリ秒ごとにデバウンス/スロットリングして、マウスとウィンドウの境界線を使用したウィンドウのサイズ変更中の過度の CPU 負荷を回避します。ブラウザーによっては、そのイベントが毎回発生するためです。このようなサイズ変更中にマウスが移動したピクセル - これはかなり頻繁に発生し、UI の応答が遅くなる可能性があります。

于 2013-02-26T15:38:35.960 に答える