Sample: Scroll a Block of Code (Basic Version)

Demonstration:

11.1 Overflow and clipping

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

  • A line cannot be broken, causing the line box to be wider than the block box.
  • A block-level box is too wide for the containing block. This may happen when an element's "width" property has a value that causes the generated block box to spill over sides of the containing block.
  • An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the "height" property, not by content height).
  • A descendent box is positioned absolutely [p. 130] , partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors.
  • A descendent box has negative margins [p. 97] , causing it to be positioned partly outside the box.
  • The "text-indent" property causes an inline box to hang off either the left or right edge of the block box.

Whenever overflow occurs, the "overflow" property specifies whether a box is clipped to its content box, and if so, whether a scrolling mechanism is provided to access any clipped out content.

Description:

Avoid losing sight of page header, footer, and sidebar because a portion of a page's body is lengthy. The solution is simple and elegant: scroll only the block that requires scrolling, not the entire page. Almost without fail, people to whom I show pages with these inner scrollbars jump to the conclusion that I'm using frames or iframes. In this case, all the content is sourced from the same page.

References

[tbd]

Notes

The scrolling effect is provided by the CSS overflow property. One of the drawbacks of this property is that browser support for mousewheel within these scroll blocks is somewhat patchy.

Although a great feature, this is not so good for scrolling the entire body of a page. The reason is that one must specify a fixed height in order to obtain the scrolling effect. There's no way to specify a multilength value, as one can with frames for example: rows="3em,*,2em". I went ahead and applied overflow to the main content of this site just to illustrate the effect. I chose to fix the main content height at 500px. So if you have a really small monitor you get one too many scrollbars. Conversely if you had a large monitor, you wouldn't be able to take advantage of the extra real estate to go beyond the 500px. One can try to specify percentages but it doesn't work in all browsers and has other issues. It all stems from a lack of app-like layout management on the web. XUL remedies this. Java has BorderLayout, which would be perfect for the header/navbar/footer/main-content scenario that is so abundant on the web.