X Scroller Demo 1

Cross-Browser.com

The scroller consists of header and body DIVs contained by a scrollable element. In this demo the DIVs contain tables.

Both the header and body scroll horizontally, but only the body scrolls vertically.

Tested on Win98 with IE 6.0, Firebird 0.6.1, and Opera 7.11. Evidently Opera doesn't support the element.onscroll event.

This demo is a result of this discussion.

CSS

#scroller1 {
  position:relative; overflow:auto;
  border:1px solid #000;
  width:400px; height:200px;
  margin:20px 0; padding:0;
}
#header1 {
  position:relative;
  color:#ccc; background:#333;
  width:1000px; height:30px;
  margin:0; padding:0;
}
#body1 {
  position:relative;
  color:#000; background:#9cc;
  width:1000px; height:auto;
  margin:0; padding:0;
}

XHTML

<div id='scroller1'>

<div id='header1'>
</div><!-- end header1 -->

<div id='body1'>
</div><!-- end body1 -->

</div><!-- end scroller1 -->

Javascript

var s1;
window.onload = function()
{
  s1 = new xScroller(1);
}
function xOnScroll()
{
  xMoveTo(s1.hdr, 0, s1.scr.scrollTop);
}
function xScroller(n)
{
  this.scr = xGetElementById('scroller' + n);
  this.hdr = xGetElementById('header' + n);
  this.bdy = xGetElementById('body' + n);
  this.hdr.style.zIndex = n + 1;
  this.bdy.style.zIndex = n;
  xAddEventListener(this.scr, 'scroll', xOnScroll, false);
}

Files

Download X at cross-browser.com. This code is licensed LGPL.