Scrollbar Keeps Moving

**Abbster22** · 01-06-2010, 12:48 AM

What's going on is every time a browser window resizes in Safari, the scrollbar that I created using the JavaScript from this site and created my own custom arrows, handle, and scrollbar. I'm wondering how to have it so that when the user resizes the browser window that I can have the content and scrollbar be in the middle and have the scrollbar stay next to the content? Please let me know if anything else is needed.

Code:

Here is my CSS:
#scroller {
position: relative;
height: 275px;
width: 550px;
overflow: hidden;
}

.scroller-content {
position: absolute;
top: 0px;
left: 0px;
}

#scrollbar-content {
position: absolute;
top: 40px;
left: 60px;
}

.Scrollbar-Up {
cursor: pointer;
width: 28px;
height: 36px;
position: absolute;
top: 270px;
left: 880px;
}

.Scrollbar-Down {
cursor: pointer;
width: 28px;
height: 36px;
position: absolute;
top: 457px;
left: 880px;
}

.Scrollbar-Track {
width: 9px;
height: 151px;
position: absolute;
top: 306px;
left: 890px;
background: transparent url(/scrollbar.png) no-repeat center center;
}

.Scrollbar-Handle {
position: absolute;
width: 42px;
height: 25px;
}

Here is the HTML:
<div id="scrollbar-content">
<img src="images/up_arrow.png" class="Scrollbar-Up" />
<img src="images/down_arrow.png" class="Scrollbar-Down" />
<div class="Scrollbar-Track">
<img src="images/scrollbar_handle.png" class="Scrollbar-Handle" />
</div>
</div>
<div class="content">
<div id="scroller">
<div class="scroller-content">
This is where the content goes.
</div>
</div>