htmlbook.ru - Как убрать полосы прокрутки

Перед тем как убрать полосы прокрутки (скроллбар) с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого веб-страницы создает трудности посетителям сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали!

Фреймы

Для управления отображением полос прокрутки во фреймах используется параметр scrolling. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (пример 1).

Пример 1. Запрет полосы прокрутки во фреймах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фреймы</title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="MENU" noresize scrolling="no">
<frame src="content.html" name="CONTENT">
</frameset>
</html>

Как показано в примере, в левом фрейме с именем MENU полосы прокрутки не будет. В соседнем с ним фрейме, хотя параметр scrolling и не указан, полосы прокрутки будут видны, как возможность установленная по умолчанию.

Новые окна

Чтобы удалить скроллбар из новых окон, возможностей HTML будет недостаточно. Универсальный подход требует использования языка JavaScript для создания нового окна. А в качестве одного из параметра метода window.open, который и создает окно, можно указать scrollbar=0. Данный атрибут создает окно без горизонтальных и вертикальных полос прокрутки (пример 2).

Пример 2. Создание нового окна без полос прокрутки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новое окно</title>
<script type="text/javascript">
window.open("tips.html", "TIP", "width=400, height=300, status=0, menubar=0, location=0, resizable=0, directories=0, toolbar=0, scrollbar=0");
</script>
</head>
<body>
<p>...</p>
</body>
</html>

В данном примере открывается файл tips.html в новом окне размером 400x300 пикселов и без различных элементов навигации, в том числе и без полос прокрутки.

Использование стилей

Еще один способ основан на использовании стилевого атрибута overflow. Если этот параметр применить к тегу <BODY> со значением hidden, скроллбар на веб-странице отображаться не будет (пример 3).

Пример 3. Запрет полосы прокрутки на веб-странице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Полосы прокрутки</title>
<style type="text/css">
BODY { overflow: hidden; }
</style>
<body>
<p>...</p>
</body>
</html>

Точно также можно убрать скроллбар и у других элементов веб-страницы, которые его содержат — некоторые элементы форм, например.

Приведенный выше пример не работает в браузере Internet Explorer, чтобы скрыть полосы прокрутки в этом браузере, требуется убрать !DOCTYPE. Но при этом код перестанет быть валидным.

Браузер Internet Explorer поддерживает также свойство overflow-x и overflow-y, позволяющее прятать полосы прокрутки, соответственно, по горизонтали и вертикали (пример 4).

Пример 4. Запрет горизонтальной полосы прокрутки

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Полосы прокрутки</title>
<style type="text/css">
BODY { overflow-y: hidden; }
</style>
<body>
<p>...</p>
</body>
</html>

Если вы попали в ситуацию, когда полос прокрутки по какой-либо причине на экране нет, а информация, тем не менее, есть, но на экран не помещается, «прокрутить» веб-страницу можно с помощью клавиатуры (стрелками вверх и вниз) или мыши. Нажимаем кнопку мыши, когда ее курсор находится в любом месте веб-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях.