View Full Version : Scroll bar - set where it starts

03-26-2006, 01:36 PM
I have a table with a horizontal scrollbar. I would like to set where the scroll bar starts when the user loads the page. Is this possible?

In other words, if the table were, let's say, a TV guide for all of Monday and only four hours showed at a time, I want to set that the table initially shows 10am -2pm. The user could them scroll back and forth to see other hours.

All tables/images that I see always start with the scroll bar all the way to the left.

03-26-2006, 01:55 PM
I don't think that's possible, unless you use an iframe to contain the table.

03-26-2006, 02:18 PM
Even with an iframe, can you determine where the scroll bars start?

I was wondering if there was some javascript code, that scrolls?? So load the page and then instantly scroll to the correct location?

03-26-2006, 02:19 PM
perhaps you could use scrollTo() in some way if the obj can only scroll left and right it might work.
this works with you normal scroll bar on the actual window but if you adapt it yo something like below it might work


hope it works

03-26-2006, 02:29 PM
window.scrollTo() is available, as are window.pageYOffset and window.pageXOffset (Gecko) and window.document.body.scrollTop and window.document.body.scrollLeft (IE).

03-26-2006, 02:33 PM
Yes but they would only scroll the main window its self.

but im hoping the code there would get the actual element and scroll it rather than the entire page. Because thb TV guide would not take up the whole page. It would just be a part of the page.

03-26-2006, 02:58 PM
Yes but they would only scroll the main window its self.Or an iframe.

03-26-2006, 03:00 PM
Yea it would work an iframe if you wanted to do it with iframes. That would work well actualy. I hope you get it to work

03-26-2006, 06:07 PM
Well there is the (not universally supported):


Or, if your element is position:absolute;overflow:hidden; inside another that is position:relative; then the inner element's style.left can be set.

03-26-2006, 10:05 PM
When I saw this, I thought it was an easy answer, but I guess not.
If you were doing it vertically, all you'd need to do is use targets and an anchor, but I don't know if there's an equivalent for horizontal stuff. Seems like no.

03-26-2006, 10:27 PM
No, it actually is rather simple using the nested elements:

<div id="container" style="position:relative;width:400px;height:300px;">
<table id="grid" style="position:absolute;overflow:hidden;">
insert rows and cells here
<script type="text/javascript">

If you know the table's width, then no script is needed. Simply add its width value and the container's width value, divide by 2 and make it a negative number, that will be the tables initial left value, say the table is 2000px wide:

<div id="container" style="position:relative;width:400px;height:300px;">
<table id="grid" style="position:absolute;left:-1200px;overflow:hidden;">
insert rows and cells here

The two above examples will put the table at the center position in the division, adjust the numbers, if needed to use a custom initial position.

03-27-2006, 02:48 PM
I never thought about using CSS to postion it but yea that would work. as usual John you are right :p