Scrolling the List

After a form appears and the first set of data is loaded into the list, a scrollbar appears if the XML recordset contains more records than the list can display at one time. The topics in the following procedure describe how functions in the LoadList.js file load additional data when the user scrolls down the list.

To display additional rows in the list

1. Begin to Scroll
2. Run Script in testForScroll
3. Call GetMoreData Function

Begin To Scroll

Loading the List When Forms First Appear describes how the doLoad function in LoadList.js assigns the testForScroll function as the event handler for the onscroll event of the ScrollContainer DIV. ScrollContainer, a DIV element in *List.htm, has attributes that provide the scrollbar for the list. Coding *List.js describes the HTML in *List.htm.

Run Script in testForScroll

The testForScroll function determines whether the TargetTable requires more data when the user scrolls down the list (scrolling up never requires additional data). The following code fragment from testForScroll shows the criteria for getting additional data:

if (ScrollContainer.scrollTop + ScrollContainer.offsetHeight + 
       ScrollBuffer >= firstspacer.offsetTop) {
   getMoreData();

Call GetMoreData Function, which is in Loading the List When Forms First Appear, describes the process for loading additional data into the TargetTable.