You are here: / Articles / Guides / How-Tos / Programming / Technology / Tips / Here’s How to Add Scrollbars to an iframe in HTML

Here’s How to Add Scrollbars to an iframe in HTML

HTML5 Scrollbars

Share!



Since back in the early days of the iframe, adding to it has always been a straight forward task. This would be done using the HTML iframe tag scrolling attribute and setting it to “yes“.

Now if you are keen enough you will notice we have been discussing this issue in the past tense. This is because like all most things the programming world, they tend to get deprecated sooner or later. The iframe scrolling attribute is one such example.

HTML5 has dropped support for the iframe scrolling attribute in favor of CSS.

The old Ways to Scrollbars

Here is an example of how you would use scrollbars on an iframe prior to HTML5

<iframe src="/" width="400" height="200" scrolling="yes"></iframe>

With the values on the scrolling being yes, no, or auto.

The Proper Way to Scrollbars With CSS

Since HTML5 you are required to use CSS to add scrollbars to an iframe. The following is the code snippet you would use:

iframe {
overflow: scroll;
width: 100%;
height: 100%;
}

You can also specify whether you would want a vertical scrollbar or horizontal scrollbar by using one of the following.

Read Also  Qt 5.6 Alpha is Out

For horizontal scrolling:

iframe {
overflow-x: scroll;
...
}

For vertical scrolling:

iframe {
overflow-y: scroll;
...
}

There you have it. That is how simple it is to add scrollbars to an iframe using CSS and not the scrolling attribute.