How to delete scrollbars on an iframe?

Question

I added a basic iframe to my website, and it is showing scrollbars (vertical and horizontal) that I can't get rid of in any way. I've been reading a lot about it on the Net, and nothing seem to work (like overflow: hidden, or scrolling="no"). What is the best and most standard way of fixing this, as of now / 2016?

Thanks!

check this question http://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe — Transformer, Feb 02 '16 at 13:55
I added the code from @Jasper van Merle answer and also added overflow: hidden to body within the iframe, an it works. — Tom Smith, Feb 02 '16 at 14:07

score 0 · Answer 1 · answered Feb 02 '16 at 13:53

0

Use the following CSS:

iframe::-webkit-scrollbar {
  display: none;
}

answered Feb 02 '16 at 13:53

This works in Chrome, which is good, but it does not work in Explorer and Firefox. – Tom Smith Feb 02 '16 at 14:01

score 0 · Answer 2 · answered Feb 02 '16 at 14:05

0

i would say

<iframe scrolling="no" src="..." >

CSS

iframe { overflow:hidden; }

<body>
      <div class="ifrm">
        <iframe src="http://tholman.com/elevator.js/" height="300" width="300" scrolling="no"</iframe>
      </div>
    </body>

answered Feb 02 '16 at 14:05

MKAD

447
2
10

score 0 · Answer 3 · answered Feb 02 '16 at 14:07

The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.

iframe {
    overflow: hidden;
}

How to delete scrollbars on an iframe?

3 Answers3