Как убрать полосу прокрутки

Меня часто спрашивают о том, как убрать полосу прокрутки как вертикальную, так и горизонтальную. Конечно, убирать или не убирать полосу прокрутки  - это спорный вопрос, ведь понятно, что если убрать полосу прокрутки, то пользователь может не прочитать какой-то важный текст, который выходит за границы элемента. Что ж, в этой статье я покажу на примерах как убрать полосу прокрутки при помощи стилей css (Cascading Style Sheets).

Пример 1. Нужно убрать полосы прокрутки у определенного элемента

Представим себе, что  у нас есть веб-страница с таким вот исходным кодом:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Убираем полосу прокрутки на сайте</title>
<meta http-equiv=»content-type» content=»text/html;charset=utf-8″/>
<style type=»text/css»>
#welcome{
width:100px;
height:50px;
background: #eee;
color:#111;
overflow:auto;
}
</style></head><body>
<div id=»welcome»>
Приветствуем Вас на нашем сайте!
Прочитайте это сообщение до конца.
Мы — команда талантливых специалистов с сфере front-end разработки.
Будьте в курсе всех наших последних новостей!
</div>
</body>
</html>

 

Что мы видим в коде?

Мы видим блок с идентификатором welcome и прописанные к нему стили css. Одно из свойств css задает прокрутку содержимого которое выходит за границы блока. Предположим, мы хотим скрыть полосы прокрутки у этого блока. Для этого достаточно поставить значение hidden атрибуту overflow. Вот так будет выглядеть полный HTML-код данной страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Убираем полосу прокрутки на сайте</title>
<meta http-equiv=»content-type» content=»text/html;charset=utf-8″/>
<style type=»text/css»>
#welcome{
width:100px;
height:50px;
background: #eee;
color:#111;
overflow:hidden; /*  убираем прокрутку */
}
</style></head><body>
<div id=»welcome»>
Приветствуем Вас на нашем сайте!
Прочитайте это сообщение до конца.
Мы — команда талантливых специалистов с сфере front-end разработки.
Будьте в курсе всех наших последних новостей!
</div>
</body>
</html>

Таким образом, мы добились нашей цели. Полоса прокрутки убрана. Перейдем к другой задаче.

Пример 2. Нужно убрать полосы прокрутки на всей HTML странице

Убрать полосы прокрутки на всей веб-странице можно установив overflow:hidden для селектора html. Если взять исходный код предыдущего примера, то можно добавить правило для селектора html. Посмотрим на исходный код в результате:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Убираем полосу прокрутки на сайте</title>
<meta http-equiv=»content-type» content=»text/html;charset=utf-8″/>
<style type=»text/css»>
html{overflow:hidden;}
#welcome{
width:100px;
height:50px;
background: #eee;
color:#111;
overflow:hidden;  /*  убираем прокрутку */
}
</style></head><body>
<div id=»welcome»>
Приветствуем Вас на нашем сайте!
Прочитайте это сообщение до конца.
Мы — команда талантливых специалистов с сфере front-end разработки.
Будьте в курсе всех наших последних новостей!
</div>
</body>
</html>

Что ж, вот мы и разобрались с тем, как убрать полосу прокрутки на сайте или отдельной веб-странице. Изучайте CSS и практикуйтесь в задании специальных свойств.

Успехов!

Запись опубликована в рубрике CSS.
Теги: , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>