How to hide scrolling bar from the iframed page

Question

I have an iframe on HTML page, and I want to hide vertical "scrolling".

In my CSS, I input this, but I didn't get results, scrolling is still visible.

iframe{
    overflow:hidden;
}

Also, i try to use "style= scrolling="no"" but still withouts success.

you can find the answer here I think http://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-hide-iframe-vertical-scrollbar/1848336#1848336 — Obaidul Kader, Apr 29 '17 at 18:38

score 1 · Answer 1 · answered Apr 29 '17 at 18:41

1

scrolling="no" is an attribute, not a CSS property. It doesn't need to be wrapped in style:

<iframe
  src="https://example.com/"
  width="100" height="100"
  scrolling="no"
>
</iframe>

answered Apr 29 '17 at 18:41

This is my code, i also tryed yours but it still display me vertical scroll. – Serbon Apr 29 '17 at 18:48

score 1 · Answer 2 · answered Apr 29 '17 at 18:55

1

I fix the problem by adding position: fixed in css.

answered Apr 29 '17 at 18:55

Serbon

score 1 · Answer 3 · answered Apr 29 '17 at 18:58

1

You can use <iframe src="#" scrolling="no"></iframe>. Hope that helps!

answered Apr 29 '17 at 18:58

Joshua

@Serbon that does work with Chrome. I've tried it before. – Joshua Apr 30 '17 at 20:18

score 0 · Answer 4 · answered Apr 29 '17 at 18:57

If iframe content is in same domain and If you are ready to use JS to hide scroll inside iframe content, you can use this:

var elem = document.getElementById("if");
elem.contentDocument.body.style.overflow="hidden"

considering "if" as id of your iframe.

or use scrolling="no" as mentioned in another answer.

4 Answers4