How to remove Iframe scrollbar but full page should load?

user_3233135 0
Viewed 5475

After adding Iframe inside contentArea, I am getting two scroll bars. I wanted to hide iframe scrollbar without hiding any content of external website link. How can I do that? I added the below snippet code and tried couple of things like scrollbar="no" but didn't work. Help me on this and thank you in advance.

I need contentArea scrollbar. Just wanted to hide iframe scrollbar without hiding external website content.

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;}
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>

iframe scrollbar css html javascript
7 Answers

You need to make the size of the iframe match the size of the content in the iframe. Their is no native way of doing this in the browser, and if your doing this cross-domain then you will need JS code on both the parent and in the iframe.

Here is a much longer answer that I wrote a few years ago on how to do this.

iframe Auto Adjust Height as content changes

Alternatively their is this library that will make things a lot simpler for you.

https://github.com/davidjbradshaw/iframe-resizer

user_20870700

Try this, you will able to hide the scroll bar of iframe but you can still scroll your page

<div style='width: 500px; height: 120px; overflow: hidden;'>

    <iframe style='width: 518px; height: 120px;' src=''></iframe>

</div>
user_134724550

You can use overflow:hidden

.contentArea {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden; //This should hide the scrollbar for you
}
user_9752340

This is not entirely possible without controlling the domain where the iframe points. However this is about as close as you can get to what you're looking for and have it reliable.

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.contentArea {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: auto;
  overflow-y: scroll;
}

.flex-box {
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;
  /* Set height as percentage of viewport */
  min-height: 100%;
}

iframe {
  /*
  DO not adjust height of iframe here.
  set the height on .flex-box
  */
  width: calc(100% + 16px);
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

.additional-content {
  padding: 15px;
  background-color: #CDDC39;
}
<div class="contentArea">

  <div class="additional-content">Content Before. Remove and iframe will fill this space.
  </div>

  <div class="flex-box">
    <iframe id="myIframe" src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
  </div>
  <div class="additional-content">
    Some content after.<br> Remove and iframe will fill this space. Remove both top and bottom additonal content and the iframe will fill entire window.
  </div>
</div>

user_55880770

I used this idea to 'seamlessly' embed a WordPress page into a Magento2 Page, using an iframe... since I really needed the WP template.. and it works.

Added this JS

// stackoverflow.com/questions/1145850/
function getDocHeight(doc) {
    doc = doc || document;   
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    const ifrm = document.getElementById(id);
    const doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.height = getDocHeight( doc ) + 2 + "px";
}

With this iframe code

<iframe id='wp-twoblock-0'
 src='https://www.example.com/wp/twoblock'
 onload='setIframeHeight(this.id);'
 style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' 
 target='_PARENT' marginwidth='0'
 marginheight='0' frameborder='0' scrolling='no' ></iframe>

Principally, it works this way:

  1. Loads the iframe content
  2. Runs the setiframeHeight
  3. which then adjusts the iframe height to the proper content height .. with the given CSS and voila!

No iframe content is hidden, no double scrollbars! Hope it helps! Demo here: https://copy.pc.pl/test.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="">
  <meta name="viewport" content="width=, initial-scale=">
  <title></title>
  <script>
    function getDocHeight(doc) {
      doc = doc || document;
      var body = doc.body,
        html = doc.documentElement;
      var height = Math.max(body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight);
      return height;
    }

    function setIframeHeight(id) {
      const ifrm = document.getElementById(id);
      const doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
      ifrm.style.height = getDocHeight(doc) + 2 + "px";
    }
  </script>
</head>

<body>
  <h1>Parent</h1>
  <iframe id='wp-twoblock-0' src='otherdocument.html' onload='setIframeHeight(this.id);' style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' target='_PARENT' marginwidth='0' marginheight='0' frameborder='0' scrolling='no'></iframe>
</body>

</html>

user_139446110

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

user_139615780

You can hide the scroll bar with CSS

.contentArea iframe::-webkit-scrollbar {
  width: 0px;
}

This should do what you need.

user_87770690
Related