| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Прибрати горизонтальні або вертикальні смуги прокручування зі сторінки, не залежно від обсягу сторінки.
Рішення
Перед тим як прибрати смуги прокрутки з веб-сторінки, подумайте, чи дійсно вам це так необхідно. Відсутність можливості прокрутки вмісту документа створює труднощі відвідувачам сайту для перегляду інформації. Якщо ж існує гостра необхідність побудови дизайнерських вишукувань або бажання створити своїм читачам труднощі, то вперед. Але вас попереджали!
Спосіб заснований на використанні властивості overflow, яке додається до селектору HTML, як показано в прикладі 1.
Приклад 1. Сторінка без смуг прокручування
HTML5 CSS2. 1 IE Cr Op Sa Fx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Смуги прокрутки</title>
<style>
html { overflow: hidden; }
div { height: 2000px; }
</style>
</head>
<body>
<div>Бла-бла</div>
</body>
</html>
У даному прикладі використовується значення hidden, яке «обрізає» весь контент виходить за рамки елемента.
Також можна використовувати властивість overflow-x, щоб приховати тільки горизонтальну смугу прокручування і overflow-y — для приховування вертикальної смуги. У прикладі 2 показано додавання шару з мінімальною шириною 800 пікселів. При зменшенні вікна браузера до цієї величини, шар перестає змінювати свої розміри і з'являється горизонтальна смуга прокрутки. За допомогою властивості overflow-x смуги прокручування ховаються.
Приклад 2. Немає горизонтальної смуги прокручування
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Смуги прокрутки</title>
<style>
html { overflow-x: hidden; }
div {
min-width: 800px; /* Мінімальна ширина */
background: #fc0; /* Колір фону */
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<div>Бла-бла</div>
</body>
</html>
Властивості overflow-x і overflow-y входять до специфікації CSS3 і не проходять валідацію при перевірці стилів на CSS2.1.