---
sourceDocument: Xanadu API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Scrollable areas

# Scrollable areas {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

A scrollable area is a div where contents scroll from the bottom up over
time.
You can scroll any HTML content, and anything inside the scroller is operational HTML with
functioning links and images.  
To make a scrollable areas, wrap the scrolling content inside of a scrollable_area tag, likely in a UI Page:

        <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>

The system will then create a 100 pixel high div and the contents will automatically scroll
from bottom to top. If you have a 1000 pixel high block of text, for example, you'll see the
top 100 pixels and then pixels 2-101, then 3-102, etc. Once it reaches the top it'll wrap
back around to the bottom.  
This sample code will create a scroller with a list of priority 1 incidents.

    <?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>

* **[Add scrolling elements in forms](https://servicenow-prod.fluidtopics.net/WnOdTdp43iTaXtvbG2nrWQ)**   
  You can add scrolling areas to forms as well as UI pages.