Iframe - Vertical Scrolling Only

Question

I have an iframe.

I need a cross-browser solution to make sure that only the vertical scrollbar is visible, regardless of the width of the iframe content.

My solution already has jQuery dependency, so if this is not possible with CSS only, I'm open to jQuery solutions.

How can i do this?

Answer 1

You can customize the scrollbars of an iframe or any element with the following css code:

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll } 

Answer 2

To show only the vertical scrollbar in the iframe, you specify an iframe width greater than the width of the page inside the iframe.

 <iframe src="#" width="--" height="250"> <p>Your browser does not support iframes.</p> </iframe> 

Or try the following:

 <style> #scroll-box { background:#e6e6e6; width:150px; height: 150px; padding:15px; overflow-y: scroll } </style> <iframe id="scroll-box"> <h3>Lorem ipsum dolor sit amet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </iframe> 

Answer 3

Layout ...

Place the <div> on the page loaded within the <iframe> and you can control the scroll.

 <iframe scrolling="no" height="400" width="600" > <div id="addcontent" style='width:600px;overflow-y:scroll;overflow-x:hidden;height:400px;position:relative;top:0px;left:0px;'> </div> </iframe> 

Answer 4

this works for me (even on safari too):

 <iframe src="http://url/file.html" frameborder="0" style="overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden;height:100%;width:100%;" scrolling="yes"></iframe> 

Or you can do it too:

CSS

 iframe { overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden; height:100%; /* optional */ width:100%; /* optional */ border:none; /* optional */ } 

HTML

 <iframe src="http://url/file.html" scrolling="yes"></iframe> 

* src ( http: //url/file.html ), you must specify a valid URL and HTML file.