XUL:scrollbox

出典: MDC

« XUL リファレンス HOME [ 例 | 属性 | プロパティ | メソッド | 関連項目 ]

コンテンツをスクロールする追加の機能を持った box 要素。scrollbox はスクロールバーが表示されないので注意してください。これは、アプリケーション自身がスクロール位置を調整できるようにするために使用することを意図しています。スクロールバーを表示したいときは、style='overflow: auto;' を追加してください。これは他のコンテナ要素でも使用されます。

[編集] 例

次の例は、label の束をもつ XUL です。これらは box 内に現れます。このコンテナが、これらを保持するための十分な広さを与えないと、この囲まれた要素上では何が起こるでしょうか？大抵は、コンテンツの下側や右側が (領域からはみ出してしまうため) クリッピングされます。

<vbox>
  <label value="01 Four score and seven years ago "/>
  <label value="02 our fathers brought forth on "/>
  <label value="03 this continent, a new nation, "/>
  <label value="04 conceived in Liberty, and "/>
  <label value="05 dedicated to the proposition "/>
  <label value="06 that all men are created equal."/>
</vbox>

次の label の束の例も似ていますが、コンテナがこれらのために十分な広さを与えなくても、スクロールバーがどこからともなく現れ、ユーザが大きなコンテンツを小さな表示領域内でスクロールすることができます。ほとんどの場合、水平スクロールバーはコンテンツの幅が広い場合に、垂直スクロールバーはコンテンツの高さが高い場合に、それぞれ独立して現れます。しかし、各スクロールバーは追加の幅を取ってしまうため、それが表示領域の端に近いと、一つのスクロールバーが現れることによって他方のスクロールバーも現れてしまいます。常にスクロールバーを表示したいときは overflow:scroll を使用してください。

<vbox flex="1" style="overflow:auto">
  <label value="01 Four score and seven years ago "/>
  <label value="02 our fathers brought forth on "/>
  <label value="03 this continent, a new nation, "/>
  <label value="04 conceived in Liberty, and "/>
  <label value="05 dedicated to the proposition "/>
  <label value="06 that all men are created equal."/>
</vbox>

上記の flex="1" は必要かもしれないし、必要ではないかもしれません。この例では、囲む要素も overflow:auto です。ユーザが window を小さくした場合、それに応じて外側の box も小さくなり、スクロールバーが現れます。私たちは、この vbox が代わりに小さくなってスクロールバーが現れてほしいのです。

この例では scrollbox タグを使用していないので注意してください。このタグは、プログラム的に自動スクロールを追加してスクロールしたいときのみ必要です。

注意: scrollbox を入れ子状にすることは避けてください。これは経験のあるユーザを怒らせ、初心者ユーザを混乱させます。代わりに、これとは別の方法で解決してください。

[編集] 表示領域内の子要素をスクロールする

scrollIntoView() メソッドをお探しですか？このメソッドは XUL に存在しません。代わりに、次のようにしてください:


   var xpcomInterface = scrollbox_element.boxObject.QueryInterface(
       Components.interfaces.nsIScrollBoxObject);
   xpcomInterface.ensureElementIsVisible(child_element_to_make_visible);

他のスクロール関連のメソッドについては nsIScrollBoxObject API をご覧ください。