Results 1 to 3 of 3

Thread: Scrollbar on top with JS.

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default Scrollbar on top with JS.

    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-c...369171+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!
    Last edited by jlizarraga; 02-11-2009 at 10:01 PM. Reason: resolved

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,780
    Thanks
    2
    Thanked 414 Times in 408 Posts

  3. #3
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    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/developmen...pare_divs.html

    Code:
    <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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •