path: root/files/ja/archive/mozilla/xul/scrollbox/index.html

---
title: scrollbox
slug: Archive/Mozilla/XUL/scrollbox
tags:
  - XUL Elements
  - XUL Reference
translation_of: Archive/Mozilla/XUL/scrollbox
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
 « <a href="/ja/docs/XUL/XUL_Reference">XUL リファレンス HOME</a>    [
 <a href="#Examples">例</a> |
 <a href="#Attributes">属性</a> |
 <a href="#Properties">プロパティ</a> |
 <a href="#Methods">メソッド</a> |
 <a href="#Related">関連項目</a> ]
</span></div>
<p>コンテンツをスクロールする追加の機能を持った box 要素。<code>scrollbox</code> はスクロールバーが表示されないので注意してください。これは、アプリケーション自身がスクロール位置を調整できるようにするために使用することを意図しています。スクロールバーを表示したいときは、<code>style='overflow: auto;'</code> を追加してください。これは他のコンテナ要素でも使用されます。</p>
<h3 id="Examples" name="Examples">例</h3>
<p>次の例は、label の束をもつ XUL です。これらは box 内に現れます。このコンテナが、これらを保持するための十分な広さを与えないと、この囲まれた要素上では何が起こるでしょうか？ 大抵は、コンテンツの下側や右側が (領域からはみ出してしまうため) クリッピングされます。</p>
<pre class="eval">&lt;vbox&gt;
  &lt;label value="01 Four score and seven years ago "/&gt;
  &lt;label value="02 our fathers brought forth on "/&gt;
  &lt;label value="03 this continent, a new nation, "/&gt;
  &lt;label value="04 conceived in Liberty, and "/&gt;
  &lt;label value="05 dedicated to the proposition "/&gt;
  &lt;label value="06 that all men are created equal."/&gt;
&lt;/vbox&gt;
</pre>
<p>次の label の束の例も似ていますが、コンテナがこれらのために十分な広さを与えなくても、スクロールバーがどこからともなく現れ、ユーザが大きなコンテンツを小さな表示領域内でスクロールすることができます。 ほとんどの場合、水平スクロールバーはコンテンツの幅が広い場合に、垂直スクロールバーはコンテンツの高さが高い場合に、それぞれ独立して現れます。しかし、各スクロールバーは追加の幅を取ってしまうため、それが表示領域の端に近いと、一つのスクロールバーが現れることによって他方のスクロールバーも現れてしまいます。 常にスクロールバーを表示したいときは <strong>overflow:scroll</strong> を使用してください。</p>
<pre class="eval">&lt;vbox flex="1" style="overflow:auto"&gt;
  &lt;label value="01 Four score and seven years ago "/&gt;
  &lt;label value="02 our fathers brought forth on "/&gt;
  &lt;label value="03 this continent, a new nation, "/&gt;
  &lt;label value="04 conceived in Liberty, and "/&gt;
  &lt;label value="05 dedicated to the proposition "/&gt;
  &lt;label value="06 that all men are created equal."/&gt;
&lt;/vbox&gt;
</pre>
<p>上記の <strong>flex="1"</strong> は必要かもしれないし、必要ではないかもしれません。この例では、囲む要素も <strong>overflow:auto</strong> です。ユーザが window を小さくした場合、それに応じて外側の box も小さくなり、スクロールバーが現れます。私たちは、この vbox が代わりに小さくなってスクロールバーが現れてほしいのです。</p>
<p>この例では scrollbox タグを使用していないので注意してください。このタグは、プログラム的に自動スクロールを追加してスクロールしたいときのみ必要です。</p>
<p>注意: scrollbox を入れ子状にすることは避けてください。これは経験のあるユーザを怒らせ、初心者ユーザを混乱させます。 代わりに、これとは別の方法で解決してください。</p>
<h4 id="Scrolling_a_child_element_into_view" name="Scrolling_a_child_element_into_view">表示領域内の子要素をスクロールする</h4>
<p><code>scrollIntoView()</code> メソッドをお探しですか？ このメソッドは XUL に存在しません。代わりに、次のようにしてください: <code> </code></p>
<pre class="eval">   var xpcomInterface = <em>scrollbox_element</em>.boxObject.QueryInterface(
       Components.interfaces.nsIScrollBoxObject);
   xpcomInterface.ensureElementIsVisible(<em>child_element_to_make_visible</em>);
</pre>
<p>他のスクロール関連のメソッドについては <code><a class="external" href="http://lxr.mozilla.org/seamonkey/find?string=nsiscrollboxobject">nsIScrollBoxObject</a></code> API をご覧ください。</p>
<h3 id="Attributes" name="Attributes">属性</h3>
<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
<tbody>
<tr>
<td><p><strong>XUL 要素からの継承</strong><br> <small>
<code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
<code id="a-allowevents"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
<code id="a-class"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
<code id="a-collapsed"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
<code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
<code id="a-containment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
<code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
<code id="a-contextmenu"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
<code id="a-datasources"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
<code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
<code id="a-empty"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
<code id="a-equalsize"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
<code id="a-flags"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
<code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
<code id="a-height"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
<code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
<code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
<code id="a-insertafter"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
<code id="a-insertbefore"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
<code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
<code id="a-maxheight"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
<code id="a-maxwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
<code id="a-menu"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
<code id="a-minheight"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
<code id="a-minwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
<code id="a-mousethrough"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
<code id="a-observes"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
<code id="a-ordinal"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
<code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
<code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
<code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
<code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
<code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
<code id="a-preference-editable"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
<code id="a-querytype"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
<code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
<code id="a-removeelement"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
<code id="a-sortDirection"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
<code id="a-sortResource"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
<code id="a-sortResource2"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
<code id="a-statustext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
<code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
<code id="a-template"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
<code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
<code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
<code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
<code id="a-uri"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
<code id="a-wait-cursor"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
<code id="a-width"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
</td>
</tr>
</tbody>
</table>
<h3 id="Properties" name="Properties">プロパティ</h3>
<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 要素からの継承</strong><br> <small> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody>
</table>
<h3 id="Methods" name="Methods">メソッド</h3>
<div style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;">
<p><strong>XUL 要素からの継承</strong><br>
<small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span> </small></p>
<p><strong>DOM 要素からの継承</strong><br>
<small> <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.appendChild">appendChild()</a></code>, <a class="internal" href="/ja/DOM/Node.compareDocumentPosition" title="ja/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/ja/DOM/Node.getFeature" title="ja/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/ja/DOM/Node.getUserData" title="ja/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.insertBefore">insertBefore()</a></code>, <a class="internal" href="/ja/DOM/Node.isEqualNode" title="ja/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/ja/DOM/Node.isSameNode" title="ja/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/ja/DOM/Node.lookupNamespaceURI" title="ja/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/ja/DOM/Node.lookupPrefix" title="ja/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/ja/DOM/Node.setUserData" title="ja/DOM/Node.setUserData">setUserData</a></small></p>
</div>
<h3 id="Related" name="Related">関連項目</h3>
<p>TBD</p>
<div class="noinclude">

</div>