在iframe中隐藏滚动条，并用页面上的滚动条替换

Question

I have iframe with vertical scrollbar. I need to remove it and have this scollbar at the the page. So, when I need to scroll the content of the iframe, I can use the page scrollbar. I did hide the the vertical scrollbar from the iframe but now, I don't have it at all. I use:

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

And this works only with google chrome but it doesn't work with firefox and Internet Explorer. I tried all the following:

iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}

But they didn't work.

So, I need your help to hide the scrollbar from iframe with all browsers. And have the ability to scroll the iframe's content from the scrollbar of the page. Thank you

Answer 1

Depending on the version of IE, sometimes using iframe {overflow: hidden;} will hide the scrollbar. But putting scrolling="no" in your iframe usually works on all browsers.

Answer 2

You can add JavaScript to the page within the IFRAME to, on load and on resize, set the height of the IFRAME within the parent. The page will need to exist within the same domain as the parent, although you may be able to overcome this with browser security settings.

Within the page (example uses jQuery):

if (window != window.parent)
    $(function() {
        var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
        $(window.parent).resize(resize);
        resize();
    });

You will need to give the iframe a name on the parent page:

<iframe name="anything" ...></iframe>

Answer 3

This seems to work just fine:

Html 5/CSS

 .ifm { width: 1200px; height:800px; overflow-y: hidden; } 

 <iframe src="https://bing.com" class="ifm" scrolling="no" seamless="seamless"> </iframe> 

Based on this post.