Атрибут scrolling тега <iframe> — смуги прокрутки рамки

Атрибут scrolling визначає, чи буде відображено смугу прокрутки в елементі <iframe>.

Як правило, смуга прокрутки з'являється в <iframe> коли зміст більший, ніж розмр <iframe>.

Якщо вміст фрейма не поміщається в відведені розміри, автоматично з'являються смуги прокрутки для перегляду інформації. У деяких випадках, смуги прокрутки порушують дизайн веб-сторінки, тому від них можна відмовитися. Для управління відображенням смуг прокрутки використовується атрибут scrolling.

автор: с3с

Загальний опис

автор: NagarD

Синтаксис

<iframe scrolling="auto|yes|no">

Атрибут scrolling може отримувати 3 значень:

auto

Смуга прокрутки з'являється при необхідності (без задання)

автор: с3с

yes

Смуга прокрутки завжди відображається (навіть якщо вона не потрібна).

автор: с3с

no

Смуга прокрутки ніколи не відображається (навіть якщо вона необхідна).

автор: с3с

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	3	15	12	≤11

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	4	2

Приклади

+ запропонувати свій приклад у пісочниці

<p>З використанням атрибута scrolling</p>  
<iframe srcdoc="&lt;body style='font:14px/1.4 sans-serif;margin:8px'&gt;&lt;p&gt;Цей документ вищий за рамку.&lt;/p&gt;&lt;p&gt;Рядок 1&lt;/p&gt;&lt;p&gt;Рядок 2&lt;/p&gt;&lt;p&gt;Рядок 3&lt;/p&gt;&lt;p&gt;Рядок 4&lt;/p&gt;&lt;p&gt;Рядок 5&lt;/p&gt;&lt;p&gt;Рядок 6&lt;/p&gt;&lt;p&gt;Рядок 7&lt;/p&gt;&lt;p&gt;Рядок 8&lt;/p&gt;&lt;p&gt;Рядок 9&lt;/p&gt;&lt;p&gt;Рядок 10&lt;/p&gt;&lt;p&gt;Рядок 11&lt;/p&gt;&lt;p&gt;Рядок 12&lt;/p&gt;&lt;/body&gt;" width="200" height="200" scrolling="no"></iframe>
<br>
<br>
<p>Без використання атрибута scrolling</p>  
<iframe srcdoc="&lt;body style='font:14px/1.4 sans-serif;margin:8px'&gt;&lt;p&gt;Цей документ вищий за рамку.&lt;/p&gt;&lt;p&gt;Рядок 1&lt;/p&gt;&lt;p&gt;Рядок 2&lt;/p&gt;&lt;p&gt;Рядок 3&lt;/p&gt;&lt;p&gt;Рядок 4&lt;/p&gt;&lt;p&gt;Рядок 5&lt;/p&gt;&lt;p&gt;Рядок 6&lt;/p&gt;&lt;p&gt;Рядок 7&lt;/p&gt;&lt;p&gt;Рядок 8&lt;/p&gt;&lt;p&gt;Рядок 9&lt;/p&gt;&lt;p&gt;Рядок 10&lt;/p&gt;&lt;p&gt;Рядок 11&lt;/p&gt;&lt;p&gt;Рядок 12&lt;/p&gt;&lt;/body&gt;" width="200" height="200"></iframe>

автор: с3с

П'ять однакових рамок із однаково довгим вмістом (усі — на srcdoc, без жодного зовнішнього файлу): типова поведінка, scrolling="no", хибна спроба замінити атрибут правилом overflow на самій рамці, те саме правило на кореневому елементі вкладеного документа і сучасний scrollbar-width: none. Спробуйте прокрутити кожну колесом і подивіться, до якого рядка вдається дістатися.

HTML

<p>1. <b>Без атрибута</b> — типова поведінка. Прокрутіть колесом: доїдете до
    рядка 12.</p>
<iframe class="demo" width="240" height="96" srcdoc="<body style='margin:0;font:13px/22px system-ui,sans-serif'><div style='height:5px;background:#d64545'></div><div style='padding:0 8px'>рядок 1<br>рядок 2<br>рядок 3<br>рядок 4<br>рядок 5<br>рядок 6<br>рядок 7<br>рядок 8<br>рядок 9<br>рядок 10<br>рядок 11<br><b>рядок 12 — кінець</b></div></body>"></iframe>

<p>2. <b>scrolling="no"</b> — прокрутити не вдасться взагалі: далі рядка 4
    вміст недосяжний. Але він нікуди не подівся, і скрипт прокрутив би його
    без перешкод — атрибут ховає смугу, а не забороняє прокрутку.</p>
<iframe class="demo" width="240" height="96" scrolling="no" srcdoc="<body style='margin:0;font:13px/22px system-ui,sans-serif'><div style='height:5px;background:#d64545'></div><div style='padding:0 8px'>рядок 1<br>рядок 2<br>рядок 3<br>рядок 4<br>рядок 5<br>рядок 6<br>рядок 7<br>рядок 8<br>рядок 9<br>рядок 10<br>рядок 11<br><b>рядок 12 — кінець</b></div></body>"></iframe>

<p>3. <b>overflow: hidden НА САМІЙ РАМЦІ</b> — найпоширеніша спроба заміни.
    Рамка прокручується так само, як перша: правило не робить нічого. Червона
    смужка вгорі теж лишилася такою самою завширшки — місце під смугу прокрутки
    як віддавалося, так і віддається.</p>
<iframe class="demo outside" width="240" height="96" srcdoc="<body style='margin:0;font:13px/22px system-ui,sans-serif'><div style='height:5px;background:#d64545'></div><div style='padding:0 8px'>рядок 1<br>рядок 2<br>рядок 3<br>рядок 4<br>рядок 5<br>рядок 6<br>рядок 7<br>рядок 8<br>рядок 9<br>рядок 10<br>рядок 11<br><b>рядок 12 — кінець</b></div></body>"></iframe>

<p>4. <b>Те саме правило, але на &lt;html&gt; вкладеного документа</b> — і воно
    працює: прокрутка спинилася, червона смужка розтягнулася на всю ширину.
    Саме там живе прокрутка.</p>
<iframe class="demo" width="240" height="96" srcdoc="<html style='overflow:hidden'><body style='margin:0;font:13px/22px system-ui,sans-serif'><div style='height:5px;background:#d64545'></div><div style='padding:0 8px'>рядок 1<br>рядок 2<br>рядок 3<br>рядок 4<br>рядок 5<br>рядок 6<br>рядок 7<br>рядок 8<br>рядок 9<br>рядок 10<br>рядок 11<br><b>рядок 12 — кінець</b></div></body></html>"></iframe>

<p>5. <b>scrollbar-width: none</b> на вкладеному документі — смуги немає,
    смужка на всю ширину, а прокрутка колесом і клавіатурою лишилася робочою.
    Це і є сучасна заміна для СВОЇХ сторінок.</p>
<iframe class="demo" width="240" height="96" srcdoc="<html style='scrollbar-width:none'><body style='margin:0;font:13px/22px system-ui,sans-serif'><div style='height:5px;background:#d64545'></div><div style='padding:0 8px'>рядок 1<br>рядок 2<br>рядок 3<br>рядок 4<br>рядок 5<br>рядок 6<br>рядок 7<br>рядок 8<br>рядок 9<br>рядок 10<br>рядок 11<br><b>рядок 12 — кінець</b></div></body></html>"></iframe>

<p class="foot">Червона смужка в кожній рамці має ширину 100%. Там, де браузер
    показує класичну смугу прокрутки, вона коротша рівно на її товщину — так
    видно, у якої рамки смуга справді зникла, а не просто намальована поверх.</p>

CSS

p {
    margin: 18px 0 6px;
    max-width: 560px;
}

.demo {
    display: block;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

.outside {
    overflow: hidden;
}

.foot {
    margin-top: 22px;
    padding: 8px 12px;
    border-left: 6px solid #d64545;
    background: #fff4f4;
    font-size: .9em;
}

автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут scrolling для тегу <iframe> не підтримується у HTML5. Використовуйте CSS властивості.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.