0

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

user3117401
  • 21
  • 1
  • 5

3 Answers3

0

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.

Matthew Campbell
  • 1,118
  • 14
  • 25
  • Thank you. I need to keep the scrolling but not from the scrollbar of iframe, I need to do the scrolling from the page scrollbar. – user3117401 Jan 13 '16 at 22:33
  • So you want the iframe to stretch 100% on width and height, have the scrollbar disappear, and have the page's natural scrollbar scroll the iframe? – Matthew Campbell Jan 16 '16 at 23:44
0

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>
bdimag
  • 953
  • 8
  • 11
  • I am trying to use this solution. My problem is I did use prestashop in building the website and this software uses iframe for popup windows and use fancybox inside this iframe. The problem I can't find the iframe tag to give it a name. I mean I don't know which file has this iframe. Also, if I find the frame and gave it a name, please, in your jQuery code, where should I add this name? Thank you! – user3117401 Jan 13 '16 at 22:57
  • Within the IFRAME, the name is known from `window.name` -- if the IFRAME is being generated automatically for the popup, it's possible that a name is already provided. – bdimag Jan 13 '16 at 23:10
  • Thank you. I did use this code but it didn't work with me. It makes the scrollbar appears again on iframe and makes the iframe be longer (with adding extra empty space). – user3117401 Jan 13 '16 at 23:27
0

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.

Community
  • 1
  • 1
Miqi180
  • 1,670
  • 1
  • 18
  • 20
  • But this will disable the scrolling and I need scrolling but from the page not from the iframe. Thank you. – user3117401 Jan 13 '16 at 23:30
  • Notice that the user scrolls the parent window (i.e. "the page"), not the iFrame, since it's only scrolling of the iFrame that has been disabled. If this is not what you want, then I don't understand your question. Please specify further then. – Miqi180 Jan 14 '16 at 00:06