take a look at this guy’s site:
// http://www.autofusion.com/development/jwsinv/v0.3/compare_divs.html
wow – I had a bunch of logging data in a datagrid and since it was larger than my page, I had to scroll to the bottom and scroll to the right continuously. Finally my co-worker wondered if we couldn’t put a scroll bar at the top.
Here’s how it works:
1) suppose you have a div with a horizontal scroll bar at the bottom
2) add another div above it with auto scroll on. (make it not too tall so you don’t see the vertical scroll bar) Put another div inside this one – this div will represent the content and will cause the overflow to fire.
3) the javascript function that wires all this up connects the “scroll” events from each scroll bar so that when one is scrolled, the other’s scroll event also gets fired
Here’s the javascript I’m using:
// http://www.autofusion.com/development/jwsinv/v0.3/compare_divs.html
(function() {
var initDualScrollBar = function() {
var oScrollGrid = document.getElementById("ScrollGrid");
var otop_ScrollGrid = document.getElementById("top_ScrollGrid");
var gvWidth = $("#gvResult").width();
if (gvWidth == null) gvWidth = 100;
var divWidth = $("#ScrollGrid").width();
if (divWidth > gvWidth) gvWidth = divWidth;
$("#fakeInteriorGrid").width(gvWidth); // keep the widths the same in two scroll bars
// parallel the scroll events
addEvent(oScrollGrid, "scroll", function(e) {
otop_ScrollGrid.scrollLeft = oScrollGrid.scrollLeft;
});
addEvent(otop_ScrollGrid, "scroll", function(e) {
oScrollGrid.scrollLeft = otop_ScrollGrid.scrollLeft;
});
}
initDualScrollBar();
})();
// *************************************************************************************
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
// addEventListener not supported by IE
// these functions used in tstDataInspector to achieve the dual-scrollbar effect
function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function removeEvent( obj, type, fn )
{
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent)
{
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}
// *************************************************************************************