Always scroll parent frame with mouse wheel?
I have an iframe main located in indexflash.html that hosts an indexflash2.html html document that contains two topframes (load main.html) and a bottom limit (loads home.html). Both the top and bottom frames are scrolling = "none".
topframe contains flash navigation controls refresh the bottom frame with content to display
I want to be able to control the main scrollbar with the mouse scroll wheel so that you can scroll the entire page as a unit without visibility. Right now, I'm guessing that the focus falls on the top or bottom frames, because that's exactly where the mouse is when you try to use the scroll wheel.
The page I'm working on can be seen at http://96.9.39.101/indexflash.html
How do I make the mouse scroll wheel always control the scrollbar for the main parent iframe, no matter what frames or frames are contained within it?
I'm sure this will require some javascript, but I don't know enough JS to get to this problem 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>
You can use the onscroll event to synchronize two frames.
Edit . The website works fine for me in Chrome, there is nothing strange about scrolling. IE doesn't work that much though. I'm not sure if my idea will work.
<script type="text/javascript">
document.onscroll = function() {
parent.b.document.body.scrollTop = document.body.scrollTop;
}
</script>
Will sync the frame named b at the same point as the scrolled frame, but that's probably not what you want.
a source to share