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?

score 11 · Answer 1 · answered Jun 15 '12 at 20:32

11

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 }

answered Jun 15 '12 at 20:32

HasanG

12,734
29
100
154

Using overflow-x: allowed me to keep the iframe and content inside all fluid. Good answer. – Chris Mar 13 '13 at 20:51
16

This doesn't work for me in Chrome loading external iFrame via src attrib – Rid Iculous Aug 12 '13 at 00:54

score 6 · Answer 2 · edited Jun 16 '12 at 00:47

6

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>

edited Jun 16 '12 at 00:47

HasanG

12,734
29
100
154

answered Apr 07 '11 at 21:17

mgreen

69
1

1

Great solution to override the scrolling attribute and prevent horizontal bar. It does however show a greyed out scrollbar when the content fits. – Stuart Dobson Sep 05 '12 at 00:05

score 2 · Answer 3 · answered Sep 15 '13 at 05:16

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>

score 1 · Answer 4 · answered Apr 01 '15 at 11:39

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.

Iframe - Vertical Scrolling Only

4 Answers4