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

Since back in the early days of the iframe, adding to it has always been a straightforward 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 in 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.

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.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.