always scroll parent frame with mouse wheel?

Question

I have an iframe main located in indexflash.html which houses the html document indexflash2.html which contains two frames topframe (loads main.html) and bottomframe (loads home.html). Both topframe and bottomframe have scrolling="no".

topframe holds the flash navigation controls bottomframe updates with the content to display

I want to be able to control the scroll bar of main with the mouse scroll wheel, so that you can seemlessly scroll the entire page as one unit. Right now, I'm guessing the focus falls down on to either the topframe or bottomframe because thats where the mouse pointer is located when you attempt to use the scroll wheel.

The page I'm working on can be seen at http://96.9.39.101/indexflash.html

How can I force the mouse scroll wheel to always control the scroll bar for the parent iframe main, regardless of what frames or iframes are contained within it?

I'm sure this will require some javascript, but I'm not familiar enough with JS to jump into this problem by solo yet.

indexflash.html:

<iframe name="main" src="indexflash2.html" width="100%" height=2505></iframe>

indexflash2.html:

<frameset framespacing="0" border="0" frameborder="0" rows="400,*">
<frame name="topFrame" height="400" scrolling="no" noresize target="bottomFrame" src="main.html">
<frame name="bottomFrame" height="2105" target="_self" scrolling="no" src="home.html">
<noframes>
</frameset>

Answer 1

You can use the onscroll event to synchronize the two frames.

Edit - The website works fine for me in Chrome, there's nothing weird about scrolling. IE doesn't work quite so much though. I'm not sure if my idea would work.

<script type="text/javascript">
document.onscroll = function() {
    parent.b.document.body.scrollTop = document.body.scrollTop;
}
</script>

Will synchronize the frame with name b to be at the same point as the scrolling frame, but that's probably not what you need.