Iframe - Vertical Scrolling Only

Question

I have an iframe.

I need a cross-browser solution to ensure that only the vertical scrollbar is visible, regardless of the width of the iframe's contents.

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

How can I do this?

Solution 1

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

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

Solution 2

In order to show only the vertical scrollbar in an iframe, you specify the width of the iframe to be greater than the page's width inside the iframe.

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

Or try this:

<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>   

Solution 3

Nesting...

Put the <div> on the page that is loading within the <iframe> and you can control the scrolls.

<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>

Solution 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 this 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), needs to point to a valid URL and HTML file.

View more solutions

Comments

[Stuart Dobson]

Great solution to override the scrolling attribute and prevent horizontal bar. It does however show a greyed out scrollbar when the content fits.

[Chris]

Using overflow-x: allowed me to keep the iframe and content inside all fluid. Good answer.

[Rid Iculous]

This doesn't work for me in Chrome loading external iFrame via src attrib