View Full Version : Scrolling without a Scroll Bar

12-17-2005, 12:45 AM
I'm going to ask a question to which I'm sure the answer will be NO, but perhaps someone can suggest another solution.

My page consists of two columns, each a separate frame. Actually the one on the left is narrow and used for Google ads; the one on the right fills most of the screen and contains a calculator coded in JavaScript.

(Perhaps it's worth explaining... the calculator frame is re-drawn/re-created in JS with each calculation. I can't integrate the Google ad code into the JS code which re-creates the main frame, so that is why it is stuck off to the side in a separate, HTML frame.)

The frame for the ads on the left has no scroll bar as that would look prohibitively ugly... having a scroll bar running down the middle of the page.

It's kind of a nice feature that as you scroll down the main frame to look at the calculator, the ads on the left stay put rather than scrolling off the screen. However, to be sure they don't get cut off by a user's small display, they have to be very short and limited in content.

So the question is... is there any way to force the frame on the left (which doesn't have a scroll bar) to scroll along with the frame on the right (which does have a scroll bar).

Thanks, Peter

12-17-2005, 09:05 AM
I can't think of any way. Please PM me if someone comes up with something.

12-17-2005, 09:07 AM
you could stick both pages in frames
<html><body><iframe src="bannerads.htm"></iframe><iframe src="calculator.htm"></iframe></body></html>

there are lots of ways to get there without script, scrolling divs for example - but perhaps those won't work for you. the js would be something like this
<html><body onscroll="document.getElementById('d').style.top=document.body.scrollTop"><iframe src="bannerads.htm" id="bannerads" style="position:absolute"></iframe>calculator stuff</body></html>

12-17-2005, 09:17 AM

Thanks! I don't understand your JS code at all, but I'm glad there's hope!

When I have time I'll get out the books and try to figure it out and maybe post some questions. Maybe not till January as it will take some time.

I'm self-taught in JS... a real novice. But I never copy code. I always want to understand it... so I have to break it down bit by bit.

Thanks again,


09-01-2006, 03:06 AM
<html><body onscroll="document.getElementById('d').style.top=document.body.scrollTop"><iframe src="bannerads.htm" id="bannerads" style="position:absolute"></iframe>calculator stuff</body></html>

Could someone please help me understand this code provided by subhailc nine months ago?

I created a little button in the main frame on my screen that calls this code:

alert (parent.image.document.body.scrollTop);
alert (parent.ads.document.body.scrollTop);

If I scroll down a little before activating this code, the first alert tells me how far I scrolled down (in the "image" frame). But the second alert gives zero, instead of the same number.

Obviously I don't have a clue what I'm doing... just playing around to try to figure things out. Again, my goal is that when I scroll down in the main frame (image) the little frame to the left (ads) which doesn't have scroll bars will scroll along with "image."

Thanks so much,


09-01-2006, 07:23 AM
Can you, instead of using frames, load the external html content into a div?

You would remove the frame with the ads and instead place a div in your main page, with id="menuholder". The content will load inside there, and scroll with page. Like this:

<body onload="loadMenu();">
<div id="menuholder"></div>

Javascript follows, of course, change "menu.html" to reference your html file instead:

function loadMenu () {
var page_request = false;
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest();
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
} else return false

loadpage(page_request, containerid);

page_request.open('GET', url, true);

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

09-01-2006, 09:24 AM
I will have to read up on div. Never used that before.

One additional point is that I have to frequently reload/refresh the frame I want to scroll. This is easily done with a frame; not sure about using div.

Thank you. I PMed you the website address so you can see what I'm talking about.