{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":1323,"path":"api-reference/web-services/r_ScrollableAreas.md","title":"Scrollable areas","bundle":null,"doc_type":null,"release":"australia","body":"\n# Scrollable areas\n\nA scrollable area is a div where contents scroll from the bottom up over time.\n\nYou can scroll any HTML content, and anything inside the scroller is operational HTML with functioning links and images.\n\nTo make a scrollable areas, wrap the scrolling content inside of a scrollable\\_area tag, likely in a UI Page:\n\n```\n    <g:scrollable_area height=\"100px\">\n        <g2:evaluate var=\"jvar_temp\" expression=\"var kb = new GlideRecord('kb_knowledge');\"/>\n        <g:inline template=\"kb_section.xml\"/>\n    </g:scrollable_area>\n```\n\nThe 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.\n\nThis sample code will create a scroller with a list of priority 1 incidents.\n\n```\n<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<j:jelly trim=\"false\" xmlns:j=\"jelly:core\" xmlns:g=\"glide\" xmlns:j2=\"null\" xmlns:g2=\"null\">\n  <g2:evaluate var=\"jvar_inc\">\n    var inc = new GlideRecord('incident');\n    inc.addActiveQuery();\n    inc.addQuery('priority',1);\n    inc.query();\n  </g2:evaluate>\n\n  <g2:scrollable_area height=\"100px\"> \n    <table border=\"0\" cellspacing=\"2\" cellpadding=\"0\" width=\"100%\">\n      <j2:while test=\"$[inc.next()]\">\n        <j2:set var=\"jvar_inc_link\" value=\"incident.do?sys_id=$[inc.sys_id]\"/>\n        <j2:set var=\"jvar_inc_list_link\" value=\"incident_list.do?sysparm_query=active=true\"/>\n\t<tr>\n\t  <td>\n            <a href=\"$[jvar_inc_link]\">\n              <IMG SRC=\"images/services.png\" style=\"padding-right:10px\"></IMG>\n            </a>\n            <a href=\"$[jvar_inc_link]\" style=\"padding-right:10px; color:blue\">$[inc.number]</a>\n          </td>\n          <td>$[inc.short_description]</td>\n        </tr>\n      </j2:while>\n      <tr>\n        <td align=\"center\" colspan=\"2\"><a href=\"$[jvar_inc_list_link]\" style=\"color:blue\">View all active incidents</a></td>\n      </tr>\n    </table>\n  </g2:scrollable_area> \n</j:jelly>\n```\n\n-   **[Add scrolling elements in forms](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/t_AddingScrollingElementsInForms.md)**  \nYou can add scrolling areas to forms as well as UI pages.\n\n**Parent Topic:**[RSS feed reader](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/web-services/c_RSSFeedReader.md)\n\n"}}