Define CSS like so (sizes/names should be changes appropriately):
#scrollOuter {
overflow: hidden;
width: 500px;
height: 160px;
}
#scrollInner {
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
clip: rect(0px, 500px, 160px, 0px);
}
Initialise the JS from the (use horizontal/vertical):
Set the links to do the scrolling:
Left
Right
End of instructions for use */
// Because we have globals, we can only have one instance of this per page
var scrollLength = scrollOffset = scrollTopLeft = scrollBottomRight = scrollFixed = 0;
var scrollTimer;
function scrollInit(name, edge)
{
var div = bw.dom ? document.getElementById(name) : bw.ie4 ? document.all[name] : 0;
if (div)
{
thisedge = (edge == 'horizontal') ? 'Width' : 'Height';
scrollLength = eval('div.scroll' + thisedge);
scrollTopLeft = 0;
scrollBottomRight = eval('div.parentNode.client' + thisedge);
thisfixed = (edge == 'horizontal') ? 'Height' : 'Width';
scrollFixed = eval('div.scroll' + thisfixed);
}
}
function scrollIt(name, edge, amount, time)
{
var div = bw.dom ? document.getElementById(name) : bw.ie4 ? document.all[name] : 0;
if (div)
{
scrollOffset += amount;
if (scrollTopLeft + scrollOffset < 0 || scrollBottomRight + scrollOffset > scrollLength)
{
scrollOffset -= amount;
return;
}
// rect(top, right, bottom, left)
if (edge == 'horizontal')
{
div.style.clip = 'rect(0px, ' + eval(scrollBottomRight + scrollOffset) + 'px, ' + scrollFixed + 'px, ' + eval(scrollTopLeft + scrollOffset) + 'px)';
div.style.left = '-' + scrollOffset + 'px';
} else
{
div.style.clip = 'rect(' + eval(scrollTopLeft + scrollOffset) + 'px, ' + scrollFixed + 'px, ' + eval(scrollBottomRight + scrollOffset) + 'px, 0px)';
div.style.top = '-' + scrollOffset + 'px';
}
scrollTimer = setTimeout('scrollIt(\'' + name + '\', \'' + edge + '\', ' + amount + ', ' + time + ')', time);
}
}
function scrollStop()
{
if (scrollTimer) clearTimeout(scrollTimer);
}
//-->