SCROLLIN' ALONG...
Overview Article
Part 1 - About This Study

This study is an investigation into how different Browsers control their Default Scrollbars, by observing their behavior as a function of the overflow property of both the html and the body elements.

This topic is the starting point of what I term as my "Chasing-The-Tail Experiments", since I kept on chasing my tail due to interferences from other factors unrelated to the subject, along the way. As a result, I had to go back to square one many times, and try to identify, isolate and organize these UBO's under separate topics:

Eventually, having identified these UBO's and eliminated them from the equation, or, at times, "discounting" for them, one by one, I could finally arrive at the real experiments presented in this study. I must say, in the process I uncovered some unexpected skeletons in the closet.

Overflow Matrix

A 5x5 matrix was established - setting each possible value of the overflow property of the body element against those of the html element, to formulate the basic test structure:

Please Note That....

Background Colors

The most effective and powerful tool in these experiments was the use of 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) for the purposes of positively identifing the limits of each.

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 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, which in turn confirmed the existince of a third layer - referred to as the "Phantom of Opera", - over and above the html element in hierarchy, to which the Default Vertical Scrollbar belongs to.

Elements Used & Settings

Html:

Body:

#Test:

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, if the results of two versions of a given the results were same, only the results of the most recent version were presented. If the results were different, then the results of both versions were presented.

Experiment Sets

Using the same test criteria and the matrix established, the tests were conducted in 3 Phases representing three different body sizes (height and width) in relation to those of the Peep-Hole (aka Screen) as follows. It should also be noted that height and width of the html element was set to 100% for the entire range of experiments.

What is Next?

I stongly urge you to review all of the experiments and their results, as listed above. I beleive that they represent quite a comprehenesive study which generated an enormous amount of data - not just data, but confirmed data! Just the sheer numbers will show that: 175 Test Files!

However, if you are impatient, or in a hurry, you can jump the gun and review the overall results and conclusion of these experiments, as presented in Part 2 of this article.

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