Fitting the height of an iframe so that the scroll bar does not appear or directly modifying the aesthetics of the scroll bar

Question

Good night.

I'm incorporating a Google Docs iframe into an HTML code I created. Once placed inside, the generic white scroll-bar always appears, ruining the aesthetics of the code.

Is there any way to fit the height of the iframe completely, without having to do it manually, or could the scroll-bar of the iframe be changed somehow to adapt it to my website?

<iframe width='100%' height='-webkit-fill-available' frameborder='0' scrolling='no' src='https://docs.google.com/document/d/e/2PACX-1vSX7J9qDjadfQ-STxDNcvSdcCjt9swwmkpjnD6NmTSokuinhZ0ey_7vY2ZK_tnar0QLJWqbrqe0_vCx/pub?embedded=true'></iframe>

Thank you very much in advance!

Maxwell Archer · Answer 1 · 2020-08-19T22:47:53.707

Hide scroll bar

Unfortunately, you can't select items from an Iframe that is from a different origin unless you can specify that it is allowed in the header. There a way better answer on how to set up cross-origin header - Edit cross-domain Iframe content Locally Only

You should not hide the Iframe's scroll bar, because that is the one that the user will want to use to scroll. Hide the content scroll bar like this.

body {
  margin: 0;
  padding: 0;
}

.contentArea {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.contentArea::-webkit-scrollbar {
  display: none;
}

.contentArea {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

<body>
<div class="contentArea">
  <iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
</body>

for comparability with other browsers read this. https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

score 0 · Answer 2 · answered Aug 19 '20 at 22:55

Use this JS snipet for your iFrame

                        window.addEventListener('message', function(e) {
                          var iframe = document.getElementById('superFrame');
                          var eventName = e.data[0];
                          var height = e.data[1];
                          switch(eventName) {
                            case 'setIframeHeight':
                              iframe.height = height;
                              break;
                          }
                        }, false);

<div class="content">
  <iframe id="superFrame" src="" style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no"></iframe>
</div>

add this JS snipet to the top (right below the head) for the content you trying to load into the iframe. That will make sure that the iFrame is resized to the content height-wise.

    <body onLoad="resizeParent();">
  
        <script type="text/javascript">
          function resizeParent() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setIframeHeight", height], "*");
          }
        </script>

Fitting the height of an iframe so that the scroll bar does not appear or directly modifying the aesthetics of the scroll bar

2 Answers2

Hide scroll bar