Атрибут scroll тега <body> — смуги прокрутки вікна
Атрибут scroll управляє присутністю смуг прокрутки у вікні браузера, коли зміст веб-сторінки перевищує розмір поточного вікна.
Загальний опис
автор: NagarD
- Порада
-
Для заборони смуг прокрутки використовуйте стильову властивість
overflowіз значеннямhidden, застосовуючи його до селектораbody.Це застарілий атрибут, замість нього використовуйте стилі.
автор: с3с
Синтаксис
<body scroll="yes | no">Атрибут scroll може отримувати 2 значень:
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| - | - | - | - | 12+ | 2+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| - | - | - | - |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<body scroll="no">
<p>З використанням атрибуту <code>scroll</code></p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='1000' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="500" height="1000" alt="Висока картинка, щоб сторінці було що прокручувати">CSS
body {
overflow: hidden;
}Три однакові блоки з тим самим текстом і різним overflow: visible пускає текст назовні, hidden обрізає його, auto дає смугу прокрутки.
HTML
<div class="row">
<div>
<b>overflow: visible</b>
<div class="box v">Довгий текст, який не вміщується у відведену висоту блока і тому просто вилазить за його межі, налазячи на сусідів.</div>
</div>
<div>
<b>overflow: hidden</b>
<div class="box h">Довгий текст, який не вміщується у відведену висоту блока і тому просто вилазить за його межі, налазячи на сусідів.</div>
</div>
<div>
<b>overflow: auto</b>
<div class="box a">Довгий текст, який не вміщується у відведену висоту блока і тому просто вилазить за його межі, налазячи на сусідів.</div>
</div>
</div>CSS
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { width: 140px; font-size: 13px; }
.box {
height: 90px;
margin-top: 4px;
padding: 4px;
border: 2px solid #94a3b8;
background: #f1f5f9;
font-size: 13px;
}
.v { overflow: visible; }
.h { overflow: hidden; }
.a { overflow: auto; }Різниця між HTML 4.01 та HTML5
Атрибут scroll тегу <body> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!