How to remove iframe's scrollbars?

When embedding content using the <iframe> tag in an HTML page, it is often desirable to display the embedded content without a scrollbar to provide a cleaner and less distracting user experience. Removing the scrollbar of an <iframe> can be achieved through several methods. Below, I will outline common approaches with example code:

1. HTML Attribute

Before HTML5, you could hide the scrollbar by setting the scrolling attribute of the <iframe> to no.

html
<iframe src="example.html" width="500" height="500" scrolling="no"></iframe>

However, note that the scrolling attribute is no longer recommended in HTML5 and may not be supported in modern browsers.

2. CSS Styles

You can control the scrollbar of an <iframe> using CSS as follows:

html
<iframe src="example.html" width="500" height="500" style="overflow: hidden;"></iframe>

The overflow: hidden; style hides the scrollbar and prevents scrolling. This approach works reliably across most modern browsers.

3. CSS for Embedded Content

If you have control over the CSS of the content within the <iframe>, set the overflow property of the body element in the embedded page's stylesheet to hide the scrollbar.

css
/* Add to the CSS file of the iframe content */
body {
  overflow: hidden;
}

This ensures that even if the embedded content exceeds the viewport, no scrollbar appears.

4. JavaScript

For dynamic control, especially when content size changes, use JavaScript to adjust styles:

javascript
// Get the iframe element
var iframe = document.getElementById('myIframe');
// Set the style property
iframe.style.overflow = 'hidden';

Ensure this code executes after the DOM is fully loaded to guarantee the <iframe> element exists in the DOM.

Considering Practical Use Cases

In real-world applications, choose the method based on your specific use case and browser compatibility requirements. For instance, if you fully control the embedded content's design, setting overflow directly in its CSS is typically the simplest and most reliable solution. If you need parent-page control, CSS styles are often preferable.

Finally, conduct thorough browser compatibility testing and prioritize user experience to ensure content remains accessible even when the scrollbar is hidden. In cases where content exceeds the viewport, hiding the scrollbar may prevent full access; consider alternative solutions in such scenarios.