SCROLLIN' ALONG...
Phase II - Body > Peep-Hole
Test Criteria & Considerations

This second phase of the study concentrates on investigating the behavior of the default scrollbars (as well as those of the body and html elements as applicable) as a function of the overflow property, where the body element is set to be much greater (both in height & width) than the Peep-Hole. Again, the purpose of this is to be able to distinguish and identify clearly the scrollbars of these two elements, as well as their relationship with the Browser Default Scrollbars.

Furthermore, this phase is also intended to be a reality-check for the results obtained in the Phase I of this study.

Overflow Matrix

The basic 5x5 Overflow Matrix established - setting each possible value of the "overflow" property of the body element against those of the html element, were used to formulate the basic test structure:

The above matrix results in a total of 25 possible combinations/and permutations (5x5). Since the experiments involved testing Vertical Scroll (forcing the Vertical Scrollbar alone) and Horizontal Scroll (forcing the Horizontal Scrollbar alone) behavior individually, a total of 50 test files were also involved in this phase.

Background Colors

Again, we employed the simple-minded trick of using different background colors (chosen for no other reason than to provide a sharp contrast) for each of three elements that constitute the basis of these experiments (i.e. html, body & #test) in order to identify the limits of each clearly.

During the course of these experiments, it was observed that the background color of the scrollbar(s) (i.e. the color behind scrollbar itself) for Opera 7.54 consistently coincided with that of the element it belong to (dark red for html, dark green for body). This provided a further and very useful tool in identifying clearly which element any given scrollbar belongs to. Furthermore, a gray background - a background color not used in these files, distinguished - beyond the shadow of doubt, the "Browser Default Scrollbars" from the others.

Elements Used & Settings

Html:

Body:

#test:

#measure:

Tests & Results

Each test page used in these experiments is:

The following browsers/versions were used in this study:

Within the scope of this study, the results of two Internet Explorer verions tests were the same. Same apllies to those of Netscape. However, the two versions of Opera were dramatically different.

Consequently, the result of each set of experiment have been documented in a tabular format for each Browser, as follows:

Feed-back & Comments:
Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:
You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

Web Design & Engineering: Dr. Z
© 2004-2008 Martian Melodies.
All rights reserved.www.Web-ZoneZ.com