Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

iFrame Scrolling Without Body Scrolling

Status
Not open for further replies.
PCHomepage

PCHomepage

Programmer
Feb 24, 2009
609
US
I just removed the obsolete frames from one of my very old legacy Web sites (created in the mid-'90s) and have it up and running with iFrames but I am unable to remove the body scrolling and show only the vertical iFrame scrolling. Is there a way to do it?

My CSS includes:

CSS: 
html {
	min-height: 100%;
	padding-bottom: 1px;
}

body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow: hidden;
	margin: 0;
}

iframe {
	position: relative;
	width: 100%;
}

iframe#main {
	overflow-y: auto; 
	overflow: -moz-scrollbars-vertical;
}

. . . and the HTML, simplified for this posting (meta tags removed), is something like:

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>Site Name</title>
<script language="JavaScript" src="/functions/iframes.js"></script>
<script type="text/javascript">
window.onload = function () {
    setIframeHeight(document.getElementById('main'));
};</script>
</head>
<body>

<iframe src="/php/logo.php" name="logo" frameborder="0" scrolling="no" hspace="0" vspace="0" height="120"></iframe>
<iframe src="/php/main.php" id="main" name="main" frameborder="0" scrolling="auto" hspace="0" vspace="0">
Please update your browser to view this and most other sites properly.
</iframe>

</body>
</html>

In case it helps, the included Javascript contains:

JavaScript: 
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
};
 
Sort by date Sort by votes
I tested your code in the latest versions of Firefox and Chrome and the only changes required are the addition/updating of CSS attributes (see below).

[pre]
html, body {
height 100%;
}

iframe#main {
overflow-y: auto;
overflow: -moz-scrollbars-vertical;
height: 100%;
}
[/pre]

Outside of that the <iframe> works as expected.

M. Brooks
 
Upvote 0 Downvote
Thank you, though I still have the two scroll bars: one on the body and the other on the iFrame. Since posting my original question, the styles have evolved a bit from what I posted and now include the elements that you added among others. Here is what I have now:

CSS: 
html , body{
	height: 100%;
}

body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	/*overflow: auto;*/
	overflow-x: hidden;
	margin: 0;
}

iframe {
	width: 100%;
}

iframe#main {
	position: relative;
	overflow-y: auto;
	overflow: -moz-scrollbars-vertical;
	height: 100%;
	top: 120px;
}

iframe#logo {
	position: fixed;
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

When I disable the scrolling in the iFrame, it works on the "home" page but then many others are either cut off or there is excessive background showing at the bottom. As it is now, there are two scroll bars and both seems to be needed in order to view the entire page but I want only the iFrame scroll bar.
 
Upvote 0 Downvote
I just simplified the styles a bit and, while it still has two scroll bars, at lease now one of them does not go up to the top of the browsewr window beside the logo iFrame:

CSS: 
html, body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow-x: hidden;
	margin: 0;
	width: 100%;
    height: 100%;
}

iframe {
	width: 100%;
}

iframe#logo {
	position: fixed;
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

iframe#main {
    overflow-y: auto;
    overflow: -moz-scrollbars-vertical;
	margin-top: 120px;
    height: 100%;
}

If I change overflow-x: hidden; to overflow: hidden; then there is no scrolling whatsoever either in the iFrame of in the browser window. The window scroll bar seems to be related to the iframe#main top padding as it scrolls just enough to view the page if it goes under the logo.
 
Upvote 0 Downvote
Okay, this seems to work except that the main frame was cut off consistently mid-way through the footer except on short pages which showed completely until I added [bold]margin-bottom: 150px;[/bold]. However, it seems more of a kludge than a fix so what did I miss?

CSS: 
html, body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	width: 100%;
	[bold][COLOR=red]margin-bottom: 150px;[/color][/bold]
}

iframe {
	position: fixed;
	width: 100%;
}

iframe#logo {
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

iframe#main {
    overflow-y: auto;
    overflow: -moz-scrollbars-vertical;
	padding-top: 120px;
    height: 100%;
}
 
Upvote 0 Downvote
I spoke too soon! The site works properly in Firefox and IE but in Safari on the iPad, the pages are not scrollable so I can see only the portion that fits the screen.
 
Upvote 0 Downvote
I've tried everything I could find to try but yet the main iFrame does not scroll in an iPad of other iDevice. It is fine in IE, Firefox and even Safari on Windows - I do not have an OSX system for testing.

Some of the solutions I've tested use jQuery or a combination of jQuery and CSS but nothing works - and there are too many to post here but the most common is to add -webkit-overflow-scrolling: touch; to the styles. When I do this, though, the page is entirely blank and has only the background image.

Any ideas?
 
Upvote 0 Downvote
I spoke too soon! The site works properly in Firefox and IE but in Safari on the iPad, the pages are not scrollable so I can see only the portion that fits the screen."

This is due to a known issue specific to the iPad. Adding the following CSS attributes should resolve the issue.

[pre]-webkit-overflow-scrolling: touch;
overflow: auto;[/pre]





M. Brooks
 
Upvote 0 Downvote
Yes, I've read just about everything I could find and saw that it was a known issue. As I mentioned a while ago, when I do that I get a blank screen with only the background image.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
595
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
124
SitesMasstec
SitesMasstec
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
157
caykamanj1966
caykamanj1966
c0deM0nK424
  • Locked
  • Question
Horrible Vile 'horizontal overflow' appearing on bootstrap smooth scrolling website ?
Replies
2
Views
88
vacunita
vacunita
lupidol
  • Locked
  • Question
CSS: How can I keep the header of an HTML table fixed while scrolling the page?
Replies
4
Views
129
jbenson001
jbenson001

Part and Inventory Search

Sponsor

Back
Top