What does the HTML scrolling attribute do?

The scrolling attribute on iframe controlled whether scrollbars appeared when embedded content overflowed the iframe viewport. Values were yes, no, and auto. It is obsolete in HTML5.

Which element uses the scrolling attribute?

scrolling applied to iframe elements (and legacy frame elements). It is not used on div, body, or other page elements.

What should I use instead of scrolling on iframe?

Use CSS overflow on the iframe element: overflow auto for scrollbars when needed, overflow hidden to clip, or overflow scroll to always show scrollbars.

What is the difference between scrolling yes and auto?

yes always showed scrollbars. auto let the browser show scrollbars only when content overflowed. In modern CSS, overflow scroll maps to yes and overflow auto maps to auto.

Can I set scrolling with JavaScript?

Yes. iframe.scrolling or setAttribute scrolling work in the DOM for legacy compatibility, but prefer CSS overflow in new code.

HTML scrolling Attribute

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 3 Examples

Deprecated & iframe

Overview

Introduction

The scrolling attribute was used on <iframe> elements to control scrollbar visibility when embedded content was larger than the iframe’s width or height. It accepted yes, no, or auto. In HTML5 the attribute is obsolete and deprecated—use CSS overflow on the iframe instead.

What You’ll Learn

<iframe> Only

Legacy embeds.

Deprecated

Obsolete in HTML5.

yes / no / auto

Three values.

CSS overflow

Modern replacement.

JavaScript

iframe.scrolling.

Legacy code

Read old markup.

Fundamentals

Purpose of `scrolling`

The purpose of the scrolling attribute was to tell the browser whether an <iframe> should display scrollbars when the embedded document’s content overflows the iframe’s dimensions. This helped developers manage layout when embedding pages, widgets, or documents that might not fit the allotted space.

HTML5 replaced this HTML attribute with CSS. The mapping is straightforward: scrolling="yes" corresponds to overflow: scroll, scrolling="no" to overflow: hidden, and scrolling="auto" to overflow: auto.

⚠️

Do not use in new projects

Browsers may still reflect scrolling in the DOM for backward compatibility, but validators flag it as obsolete. Always prefer CSS overflow on <iframe> elements in modern web development.

Foundation

📝 Syntax

Legacy syntax on an <iframe> (shown for recognition only—do not use in new projects):

scrolling-legacy.html

<iframe
  src="https://example.com/embed"
  width="600"
  height="400"
  scrolling="auto"
  title="Embedded content"
></iframe>

Modern equivalent with CSS:

iframe-modern.html

<iframe
  src="https://example.com/embed"
  width="600"
  height="400"
  style="overflow: auto;"
  title="Embedded content"
></iframe>

Syntax Rules

Historically valid on <iframe> and legacy <frame> elements.
Value must be one of: yes, no, or auto (case-insensitive).
Default behavior in legacy HTML was equivalent to auto.
Obsolete in HTML5—use CSS overflow instead.
Not valid on <div>, <body>, or other non-frame elements.
Always include a descriptive title on iframes for accessibility.

Reference

💎 Values

The scrolling attribute accepted three keyword values:

yes — Always show scrollbars in the iframe, even when content fits.
no — Hide scrollbars; overflow content may be clipped and unreachable without other navigation.
auto — Show scrollbars only when content overflows (browser decides).

scrolling-values.html

<!-- Legacy (avoid) -->
<iframe scrolling="yes" src="..."></iframe>
<iframe scrolling="no" src="..."></iframe>
<iframe scrolling="auto" src="..."></iframe>

<!-- Modern CSS mapping -->
<!-- yes  → overflow: scroll -->
<!-- no   → overflow: hidden -->
<!-- auto → overflow: auto -->

Cheat Sheet

⚡ Quick Reference

Goal	Legacy scrolling	Modern CSS
Scrollbars when needed	`scrolling="auto"`	`overflow: auto`
Always show scrollbars	`scrolling="yes"`	`overflow: scroll`
Hide scrollbars / clip	`scrolling="no"`	`overflow: hidden`
Applicable element	`<iframe>`	`<iframe>` or wrapper
JavaScript (legacy)	`iframe.scrolling = "auto"`	`iframe.style.overflow = "auto"`
Status in HTML5	Obsolete	Recommended

Scope

Applicable Elements

Element	Supported?	Notes
`<iframe>`	Obsolete	Primary use; use CSS overflow today
`<frame>`	Obsolete	Legacy framesets; frames are obsolete entirely
`<div>`	No	Use CSS overflow on the container
`<body>`	No	Page scrolling uses CSS on html/body

Compare

`scrolling` vs CSS `overflow`

Feature	`scrolling`	CSS `overflow`
Status	Deprecated	Standard
Where to apply	iframe attribute	iframe style or class
Flexibility	Three keywords only	auto, scroll, hidden, overlay, etc.
Validator	Flags as obsolete	Valid HTML5 + CSS
Use today?	No	Yes

Hands-On

Examples Gallery

Legacy scrolling on iframe, the CSS overflow replacement, and setting scrollbar behavior dynamically with JavaScript.

👀 Live Preview

Iframe with tall inline content and scrolling="auto" (legacy demo):

Content overflows the 100px height; scrollbars appear when needed. Prefer style="overflow:auto" in new code.

Example — Legacy iframe with scrolling

Historical markup you may encounter in older embeds:

index.html

<iframe
  src="https://example.com/embed"
  width="600"
  height="400"
  scrolling="yes"
  title="Embedded page"
></iframe>

Try It Yourself

How It Works

In this example, scrolling="yes" forced scrollbars to remain visible inside the iframe viewport, even when the embedded page was smaller than the frame.

Example — Modern CSS Replacement

Control iframe overflow with CSS instead of the deprecated attribute:

iframe-overflow.html

<style>
  .embed-frame {
    width: 600px;
    height: 400px;
    overflow: auto;   /* replaces scrolling="auto" */
    border: 1px solid #cbd5e1;
  }
  .embed-frame--clip {
    overflow: hidden; /* replaces scrolling="no" */
  }
</style>

<iframe
  class="embed-frame"
  src="https://example.com/embed"
  title="Embedded page"
></iframe>

Try It Yourself

How It Works

Apply overflow directly on the iframe or on a wrapper element. This gives you the same behavior as legacy scrolling values with better control and validator support.

Dynamic Values with JavaScript

Legacy code set scrolling at runtime; modern code sets style.overflow:

dynamic-scrolling.html

<iframe id="myIframe" src="..." title="Embed"></iframe>

<script>
  var frame = document.getElementById("myIframe");

  // Legacy (avoid in new code)
  frame.setAttribute("scrolling", "auto");

  // Modern replacement
  frame.style.overflow = "auto";
</script>

Try It Yourself

How It Works

When toggling scrollbar behavior based on user actions, change CSS overflow rather than the obsolete scrolling attribute. The DOM property may still exist for compatibility but should not be set in new projects.

A11y

♿ Accessibility

Never use scrolling="no" to trap users — Hiding scrollbars without providing another way to reach clipped content harms keyboard and screen reader users.
Always set title on iframes — title describes the embedded content for assistive technology.
Ensure content remains reachable — If you use overflow: hidden, confirm no essential information is cut off.
Respect user scroll preferences — Avoid disabling scrolling inside embedded documents unless intentional and documented.
Pair with sandbox when embedding third parties — See the sandbox attribute for security alongside layout control.

🧠 How scrolling Worked (Legacy)

Author sets scrolling on iframe

yes, no, or auto.

Legacy

Browser maps to overflow

Controls scrollbar display.

Rendering

HTML5 deprecates attribute

CSS overflow replaces it.

Standard

Use CSS overflow today

Same control, modern markup.

Compatibility

Browser Support

The scrolling attribute is obsolete. Browsers may still honor or reflect it for backward compatibility, but it is not part of modern HTML5. CSS overflow is supported everywhere.

⚠️ Obsolete · Use CSS

Deprecated since HTML5

Legacy attribute may still work in some browsers; CSS overflow is the reliable modern approach.

0% Recommended use

Google Chrome Legacy support / ignored

Obsolete

Mozilla Firefox Legacy support

Obsolete

Apple Safari Legacy support

Obsolete

Microsoft Edge Legacy support

Obsolete

scrolling on <iframe> Do not use

Bottom line: Recognize it in legacy embeds; replace with CSS overflow in new projects.

Pro Tips

💡 Best Practices

✅ Do

Use CSS overflow: auto on iframes for modern scrollbar control
Size iframes appropriately so embedded content fits when possible
Include a descriptive title on every iframe
Remove scrolling when refactoring legacy pages
Test embeds across browsers after migrating to CSS overflow

❌ Don’t

Add scrolling to new iframe markup
Use scrolling="no" to hide content users still need to access
Assume scrolling="yes" works identically in all modern browsers
Confuse iframe scrolling with page-level body { overflow }
Embed untrusted pages without sandbox and security review

Wrap Up

Conclusion

The scrolling attribute was a useful legacy tool for managing scrollbar visibility inside <iframe> elements. It is obsolete in HTML5 and should not appear in new documents.

Use CSS overflow for the same control with better flexibility and standards compliance. Understanding the old yes, no, and auto values helps when maintaining or migrating older embedded content.

View Examples Gallery Try CSS overflow example

Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about `scrolling`

Bookmark these before editing legacy iframes.

Core concepts

⚠️ 01

Deprecated

Obsolete in HTML5

Status

🖥️ 02

<iframe>

Legacy use only

Element

↓ 03

yes / no / auto

Three values

Values

🎨 04

CSS overflow

Modern replacement

Replace

♿ 05

Don’t clip

Keep content reachable

A11y

❓ Frequently Asked Questions

What does the scrolling attribute do?

It controlled scrollbar visibility on <iframe> elements when embedded content overflowed. Values were yes, no, and auto. It is obsolete in HTML5.

Which element uses scrolling?

<iframe> and legacy <frame> elements. Not on divs or the page body.

What should I use instead?

CSS overflow: auto, overflow: scroll, or overflow: hidden on the iframe element.

What is the difference between yes and auto?

yes always showed scrollbars. auto showed them only when content overflowed. Map to overflow: scroll and overflow: auto respectively.

Can I change scrolling with JavaScript?

Legacy code used iframe.scrolling or setAttribute("scrolling", ...). Prefer iframe.style.overflow in new code.

Does scrolling still work in browsers?

Some browsers still honor it for compatibility, but behavior varies. CSS overflow is reliable and recommended.

Control iframe scrollbars the modern way

Compare legacy scrolling with CSS overflow in the Try It editor.

Try CSS overflow example →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML scope Attribute HTML selected Attribute

HTML scrolling Attribute

Introduction

What You’ll Learn

<iframe> Only

Deprecated

yes / no / auto

CSS overflow

JavaScript

Legacy code

Purpose of scrolling

📝 Syntax

Syntax Rules

💎 Values

⚡ Quick Reference

Applicable Elements

scrolling vs CSS overflow

Examples Gallery

👀 Live Preview

Example — Legacy iframe with scrolling

How It Works

Example — Modern CSS Replacement

How It Works

Dynamic Values with JavaScript

How It Works

♿ Accessibility

🧠 How scrolling Worked (Legacy)

Author sets scrolling on iframe

Browser maps to overflow

HTML5 deprecates attribute

Use CSS overflow today

Browser Support

Deprecated since HTML5

💡 Best Practices

✅ Do

❌ Don’t

Conclusion

Key Takeaways

Five truths every developer should know about scrolling

Deprecated

<iframe>

yes / no / auto

CSS overflow

Don’t clip

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML scope Attribute

HTML selected Attribute

HTML iframe Tag

Try CSS Overflow

Control iframe scrollbars the modern way

About the author

Purpose of `scrolling`

`scrolling` vs CSS `overflow`

Five truths every developer should know about `scrolling`