I thought this couldn't be done until I was looking into another scrolled content question and it more or less happened. Now with some refinemets, it is a two page solution using an iframe, here is the iframe page:
<html>
<head>
<title>Manual Scroller w/scrollbar - Demo</title>
<script type="text/javascript">
var holder,scrollspeed
</script>
<style type="text/css">
span.cntrl {
cursor:hand;
cursor:pointer;
color:blue;
text-decoration:underline
}
</style>
</head>
<body>
<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--Highly modified here-->
<!--This credit MUST stay intact for use-->
<layer visibility=hide>
<div style="width:200px;margin-bottom:3px;text-align:center;cursor:default">
<span class="cntrl" onClick="scrollspeed=1">Down</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=-1">Up</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=0">Stop</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=0;window['datamain'].location.replace('external.htm')">Top</span>
</div>
</layer>
<iframe onMouseOver="holder=scrollspeed;scrollspeed=0" onMouseOut="scrollspeed=holder" id="datamain" width=200 height=150 src="external.htm"></iframe>
</body>
</html>and here is the external.htm file used by it:
<!-- external.htm source-->
<html>
<body>
<div>
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
<b>What's Hot</b></p>
<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source
code encrypter</a> </small></font></strong><br>
<font face="Verdana" size="2">Scramble the source of any chunk of code using
this unique script.</font></p>
<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex5/flashlink.htm" target="_top">Flashing
links</a> </small></font></strong><br>
<font face="Verdana"><small>Bring attention to special links, by making them
flash!</small></font></p>
<p align="left"><small><strong><font face="Verdana"><a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top">Roaming
Cursor</a> </font></strong></small><br>
<small><font face="Verdana">Display a second, "roaming" cursor on your
page with this fun animation script.</font></small></p>
<p align="left"><font face="Verdana"><strong><a href="http://www.dynamicdrive.com/dynamicindex11/animatedtitle.htm" target="_top"><small>Animated
Document title</small></a><br>
</strong><small>Animate into view your document's title!</small></font>
<!-- END SCROLLER CONTENT -->
</div>
<!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT-->
<script type="text/javascript">
//Scrollable content III- By http://www.dynamicdrive.com
//Modified here
var speed
function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}
function scrollwindow(){
window.scrollBy(0,speed)
}
setInterval("initialize()",10)
</script>
</body>
</html>Some behaviors of these two pages will be easy to modify others will take more work, if you need a modification and can't figure it out, let me know.