Vertical Scroll Bar Not Displayed in Chrome nor Opera

HTML & CSS
1

Hello there.

I am attempting to display only a vertical scroll bar within an iframe. However, I haven’t achieved the desired effect in any browser but Mozilla Firefox.
I’ve tried out several CSS tricks, but to no avail.

Here is an image explaining what I mean.
On the left you have Google Chrome, and on the right you have Mozilla Firefox.

As you can see, Mozilla Firefox contains a vertical scroll bar at all times, regardless of overflow, yet Google Chrome does not.
How could I achieve this effect in Chrome and Opera?

iframe {
	
	padding:0px;
	margin:0px;
	overflow-x:hidden;
	overflow-y:scroll;
	width:262px;
	height:332px;
	border:none;
}

Thank you in advance. :slight_smile:

2

Hi,

I don’t think there’s anything you can do about it as other browsers seem to treat “scroll” as “auto” where iframes are concerned.

I suppose you could add a div around the iframe and set the iframe to a height greater than needed but will result in unwanted scroll space.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
iframe {
	border:0 none;
	padding:0;
}
html, body {
	margin:0;
	padding:0
}
div {
	overflow-x:hidden;
	overflow-y:scroll;
	width:262px;
	height:332px;
	border:none;
}
iframe {
	padding:0px;
	margin:0px;
	border:none;
	height:999em;/* larger than ever needed*/
}
</style>
</head>
<body>
<div>
		<iframe scrolling="no" src="iframesrc.htm" ></iframe>
</div>
</body>
</html>

I don’t think that’s a very good solution though.

3

Hi again.

Although it isn’t quite what I was looking for, I suppose I could give it a go.
I’d still like to find a full-proof solution though.

Thank you for your reply.