---
sourceDocument: Xanadu API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# スクロール可能領域

# スクロール可能領域 {#ariaid-title1}

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：2分

スクロール可能領域は、コンテンツが時間の経過とともに下から上にスクロールする区画です。
HTML コンテンツはいずれもスクロールできます。スクローラー内のすべてのものが、機能するリンクと画像を含む操作可能な HTML です。  
スクロール可能な領域を作成するには、多くの場合 UI ページで、スクロールするコンテンツを scrollable_area タグでラップします。

        <g:scrollable_area height="100px">
            <g2:evaluate var="jvar_temp" expression="var kb = new GlideRecord('kb_knowledge');"/>
            <g:inline template="kb_section.xml"/>
        </g:scrollable_area>

高さ 100 ピクセルの区画が作成され、コンテンツが自動的に下から上にスクロールされます。たとえば、高さ 1000 ピクセルのテキストブロックがある場合、上位 100 ピクセル、2 ～ 101 ピクセル、3 ～ 102 ピクセルの順に表示されます。最上部に達すると、下に折り返されます。  
このサンプルコードは、優先度 1 のインシデントのリストを使用してスクローラーを作成します。

    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
      <g2:evaluate var="jvar_inc">
        var inc = new GlideRecord('incident');
        inc.addActiveQuery();
        inc.addQuery('priority',1);
        inc.query();
      </g2:evaluate>

      <g2:scrollable_area height="100px"> 
        <table border="0" cellspacing="2" cellpadding="0" width="100%">
          <j2:while test="$[inc.next()]">
            <j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
            <j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>
    	<tr>
    	  <td>
                <a href="$[jvar_inc_link]">
                  <IMG SRC="images/services.png" style="padding-right:10px"></IMG>
                </a>
                <a href="$[jvar_inc_link]" style="padding-right:10px; color:blue">$[inc.number]</a>
              </td>
              <td>$[inc.short_description]</td>
            </tr>
          </j2:while>
          <tr>
            <td align="center" colspan="2"><a href="$[jvar_inc_list_link]" style="color:blue">View all active incidents</a></td>
          </tr>
        </table>
      </g2:scrollable_area> 
    </j:jelly>

* **[フォームのスクロール要素の追加](https://servicenow-prod.fluidtopics.net/JsV~KgMjHZkhgtYL5yKMdg)**   
  フォームや UI ページにスクロール領域を追加できます。