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.