Scrollbar on top with JS.

[jlizarraga]

Hi all,

I am looking for a JS solution to creating a top scrollbar in addition to a bottom scrollbar. Here is a page where you can see this in action:

http://www.carmax.com/enUS/compare-cars/default.html?N=4294966911&SL=5176436+5610175+5369316+5483379&D=90&zip=92102&No=0&Ep=Homepage%20Make&Rp=R&Vp=C&PP=20&sV=List&CD=14+240+190+8+9&Q=66cf19e1-cb94-4450-ba4d-463523a38047&ACLc=5176436+5610175+5369316+5483379+5369171+5547657

After the page loads, a magical div called "scroll-simulator" is added above the table of cars, which behaves *exactly* as a scrollbar should in your browser of choice. I tried it in FF2, IE6, Safari, and Opera, and Safari and Opera both had their special scrollbars show up as expected.

So I'm guessing the JS checks the width of the table, and then creates this div of matching width to create a congruent scrollbar. The part I wouldn't know how to even start on is using the scroll position from one element to set the scroll position of another.

Can someone point me in the right direction on this? Can you listen for "onscroll" on things other than the window? What are the properties related to the position an element has been scrolled to? I spent some time with Google but only found information about window.

It would be super awesome if someone could provide a link or explanation on the properties/methods I'll need to tackle this.

Thanks!

[vwphillips]

http://www.vicsjavascripts.org.uk/CustomScrollBarsIII/CustomScrollBarsIII.htm

[jlizarraga]

Thanks for your response. It wasn't quite what I was looking for, but it got me pointed in the right direction.

http://www.autofusion.com/development/jwsinv/v0.3/compare_divs.html



<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script>
(function(){

var initTest = function(){
var oColumnsContainer = document.getElementById("compare_ColumnsContainer");
var oFauxScroll = document.getElementById("compare_FauxScroll");
var oScrollContainer = document.getElementById("compare_ScrollContainer");
var oFauxScrollContainer = document.getElementById("compare_FauxScrollContainer");
var oColumns = YAHOO.util.Dom.getElementsByClassName("compare_Column", "div", oColumnsContainer);
var oEqualWidths = [oColumnsContainer, oFauxScroll];
YAHOO.util.Dom.setStyle(oEqualWidths, "width", ((oColumns.length * 186) + "px"));
YAHOO.util.Event.addListener(oScrollContainer, "scroll", function(e){
oFauxScrollContainer.scrollLeft = oScrollContainer.scrollLeft;
});
YAHOO.util.Event.addListener(oFauxScrollContainer, "scroll", function(e){
oScrollContainer.scrollLeft = oFauxScrollContainer.scrollLeft;
});
}

YAHOO.util.Event.onDOMReady(initTest);

})();
</script>


Working great in FF2, IE6, and Opera. A little jaggy in Safari, but it works. It would have been preferable to replace the 186 with style.width or offsetWidth, but Safari gets both wrong most of the time. I abandoned the table for divs since I had too many headaches with the tables, and the data is column-based anyway.

Hi Googlers! The missing puzzle pieces ended up being element.onscroll and element.scrollLeft:

https://developer.mozilla.org/en/DOM/element.onscroll
https://developer.mozilla.org/En/DOM/Element.scrollLeft