Notice that the table height is set to 50, but it still does not scroll.

The two CSS properties overflow:auto; and overflow-x:hidden;* actually make the scroll bar appear on the right within the div element and make the table scroll within the div. The browser’s CSS engine must support these two properties. Otherwise, the table would only grow in place without the scroll bar.

* These are CSS2 properties. If content in an element falls outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.), the ‘overflow’ and ‘overflow-x’ properties describe what to do with the content that exceeds the element’s width.

These CSS properties only define the appearance of the div and table, but JavaScript APIs interface with the scroll properties. To understand the implementation of a dynamic table, you need to know properties that measure HTML elements’ dimension and location on the page. These properties can be programmatically accessed and changed in JavaScript and, thankfully, APIs are the same across most major browsers.

HTML element properties

Here is the cheat sheet of available HTML element properties for HTML BODY and a single DIV element in the center of the page. As you can see, there are a lot of them, but the three of the most interest are scrollTop, scrollHeight, and clientHeight.

Figure 5: Visual representation of Div element properties (source MSDN)

The scrollTop specifies the position of the content upper bound relative to the visible portion of the viewport (defined by the div’s height and width), as the user scrolls. scrollTop would indicate the distance in pixels the content moved. The scrollHeight specifies the actual height in pixels of the inner element and clientHeight specifies height of the visible content (viewport height). In my case, the viewport is the outer div element and the content is the inner TABLE. The Height and Top properties do not account for element’s borders, margins, or padding, and if your elements have any of these attributes, look into the offset group of properties, among others. Similarity to the height, there are width properties to deal with horizontal scrolling calculations.

Every element placed on the page has these properties and the way elements look (and behave) depends on the values of these properties.

Here is simplified depiction of the div element’s properties in the page.

Figure 6: Code to generate scroll behavior within 500px Div