Remove scrollbar from iframe

Clean codes: Inline vs. External CSS

While inline CSS is quick off the blocks, it often falters in the long run, lacking scalability and maintainability. For a solution that doesn't buckle under pressure, consider an external stylesheet:

/* Steer clear of scroll with class! */
iframe.no-scroll {
  overflow: hidden;
}


And bring the class into the fray like so:

<iframe class="no-scroll" src="your-page.html"></iframe>


Welcome a world of consistent and easy-to-maintain styling across multiple iframes.

Taking on the dynamic duo, content and dimensions

Dynamic content that tweaks iframe dimensions, often results in scrollbars making surprise appearances. JavaScript stands ready to save the day, adjusting iframe size dynamically:

window.addEventListener('message', function(event) {
  /* JavaScript to the rescue! */
  var iframe = document.getElementById('yourIframe');
  if (event.origin === 'http://your-page-origin.com') {
    iframe.style.height = event.data.newHeight + 'px'; /* New height, who dis? */
  }
});


The embedded voyager can post the newHeight to the window landlord via window.parent.postMessage.

Cross-domain issues, begone

When the iframe loads content from another domain, you can't control its style due to same-origin policy. The external site needs to play ball with:

body {
  overflow: hidden; /* Who let the scroll out? Who, who? Not us! */
}


Included in the iframe's content stylesheet, of course.

Of deprecated attributes and CSS heroes

Although using scrolling="no" wakes up the nostalgia esports generation, it's deprecated. Today's MVP is CSS! The seamless attribute in HTML5 also rings the remaining bell, but it's largely ignored by major browsers and is best left in the dust.

Nifty nuances in styling

To hide horizontal scroll while maintaining vertical, use overflow-y: scroll; overflow-x: hidden;. You might find it useful for vertical story-telling:

iframe {
  overflow-y: scroll; /* Vertical scrolling welcomed */
  overflow-x: hidden; /* Horizontal scrolling hidden, but the cake was a lie! */
}


Remember the fixed dimensions tip—set a width and height to maintain your design's integrity and uniformity.