View Full Version : Moving a scrollbar?

Mar 29th, 2005, 01:10 AM
I am having no luck with this problem in html & css maybe java is what I need. Here is the link::


I want to move the scrollbar from the inside "window" to the outside of browser (as if there were content on the entire page to scroll to.) But, I still want the scrollbar to only effect that interior block of text giving the illusion that it exists within that smaller window. The only answers I've gotten so far is to re-design the page, but this being part of a design thesis I would really not like to do that. Also, I do know why the scrollbar (overflow:auto) this is just the closest I can get to what I'm looking for. Any help would be greatly appreciated. Thanks.


Mar 29th, 2005, 11:37 PM
You'll only get the main pages "onscroll" events AFTER the main page has been scrolled... So... To solve this problem you can create a scrollbar that you can position on the right of the screen (as if it were the main pages scrollbar) that controls the scrolling of your content box.

This will only work if the page was created using window.open() with scrolling=no, otherwise there will be two scrollbars shown on the page. (To get around this problem you would need to redesign the layout using frames.)

Ok... create three nested div elements as follows:

<div style="overflow: hidden;" style="height: 100%; width: 20;position:absolute; top:0; right:0;" >
<div id="scrollbardiv" style="margin:0; padding:0;overflow-y:
scroll;width:0;height:100%;position:absolute; top:0; right:0;" >
<div id="contentscroll" style="height: 2000px;width:1;">

Using the onload event of you content div, you need to change the height of the "contentscroll" div so that the scrollbar represents the correct visible height with its slider.

Using the onscroll event of the "scrollbardiv" div, you can then send doscroll() messages to your content div.

Hope that helps.

Mar 30th, 2005, 09:49 PM
Thanks alot! I'll give this try (it seems like it'll work to me but I know very little about java).


Mar 30th, 2005, 09:54 PM
position: fixed;

Change the position value in the _styles.css document in #box to absolute. That might work :thumbsup: