How to add scrollbars in iframe

By default, the <iframe> element in HTML displays scrollbars when its content exceeds the specified height or width. However, this behavior can be adjusted using CSS styles or iframe attributes.

Method 1: Using HTML Attributes

You can control the scrollbars directly by using the scrolling attribute within the <iframe> tag. The scrolling attribute can be set to yes, no, or auto.

• yes: Always display scrollbars.
• no: Never display scrollbars.
• auto: Display scrollbars automatically if the content exceeds the iframe's dimensions.

Example code:

html
<iframe src="example.html" width="300" height="200" scrolling="yes"></iframe>

This code creates an iframe that always displays scrollbars regardless of the content length.

Method 2: Using CSS Styles

You can also control scrolling behavior using CSS. By setting the overflow property, you can control whether scrollbars are displayed.

• overflow: scroll;: Always display scrollbars.
• overflow: hidden;: Never display scrollbars.
• overflow: auto;: Display scrollbars automatically if the content exceeds the iframe's dimensions.

Example code:

html
<style>
  iframe {
    width: 300px;
    height: 200px;
    overflow: auto; /* Scrollbars appear only when needed */
  }
</style>
<iframe src="example.html"></iframe>

In this example, the iframe will automatically display scrollbars based on the content size.

Summary

It is recommended to use CSS for controlling scrollbars, as it offers more styling options and the scrolling attribute is no longer recommended in HTML5. With CSS, you can also customize scrollbars further, such as changing their color and size.