Monday, October 3, 2011

CSS property Overflow & scroll bar: how to test

The CSS property Overflow can be used when displaying content. It regulates the scrollbars. You can use 4 variables in the element overflow, namely auto, hidden, scroll and visible. Auto will automatically add a scrollbar when needed. Hidden will not show a scrollbar, but ‘hide’ the content that usually expand the box. Scroll will always add a scrollbar. The value visible will not expand the div, but will just display all the content without changing the div’s height.

Very convenient technic if you want to let a scroll bar appear when content of your DIV gets to a specific height. For more details you can read this article for example, but in this tutorial I'm going to cover testing aspects of this technic.

Actually here there is a problem. How is it possible to check that your scroll bar appears or not when dynamic content of your DIV changes? You can't just get a visibility of the scroll bar and verify it. But we can use the scrollTop jQuery method, that gets the current vertical position of the scroll bar for the given element: the vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

The first scrollTop call with the position parameter sets the current vertical position of the scroll bar for the given element. If this element is scrollable, the second empty scrollTop call will return value that is equal the given position value, otherwise it will return zero.