Как убрать полосы прокрутки
Перед тем как убрать полосы прокрутки (скроллбар) с web-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого web-страницы создает трудности посетителям с нашего сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали!
Фреймы
Для управления отображением полос прокрутки во фреймах используется параметр scrolling. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (пример 1).
Пример 1. Запрет полосы прокрутки во фреймах
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фреймы</title>
</head>
<frameset cols="200,*">
<frame src="menu.ШТМЛ" name="MENU" noresize scrolling="no">
<frame src="content.ШТМЛ" name="CONTENT">
</frameset>
</html>
Как показано в примере, в левом фрейме с именем MENU полосы прокрутки не будет. В соседнем с ним фрейме, хотя параметр scrolling и не указан, полосы прокрутки будут видны, как возможность установленная по умолчанию.
Новые окна
Чтобы удалить скроллбар из новых окон, возможностей ШТМЛ будет недастаткова. Универсальный подход требует использования языка JavaScript для разработки нового окна. А в качестве одного из параметра метода window.open, который и создает окно, можно указать scrollbar=0. Данный атрибут создает окно без горизонтальных и вертикальных полос прокрутки (пример 2).
Пример 2. Создание нового окна без полос прокрутки
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Новое окно</title>
<script type="text/javascript">
window.open("tips.ШТМЛ", "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.ШТМЛ в новом окне размером 400x300 пикселов и без различных элементов навигации, в том числе и без полос прокрутки.
Использование стилей
Еще один способ основан на использовании стилевого атрибута overflow. Если этот параметр применить к тегу <BODY> со значением hidden, скроллбар на web-странице отображаться не будет (пример 3).
Пример 3. Запрет полосы прокрутки на web-странице
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Полосы прокрутки</title>
<style type="text/CSS (ЦСС)">
BODY { overflow: hidden; }
</style>
<body>
<p>...</p>
</body>
</html>
Точно также можно убрать скроллбар и у других элементов web-страницы, которые его содержат — некоторые элементы форм, например.
Замечание
Приведенный выше пример не работает в браузере Internet Эксплорер, чтобы скрыть полосы прокрутки в этом браузере, требуется убрать !DOCTYPE. Но при этом код перестанет быть валидным.
Браузер Internet Эксплорер поддерживает также свойство overflow-x и overflow-y, позволяющее прятать полосы прокрутки, соответственно, по горизонтали и вертикали (пример 4).
Пример 4. Запрет горизонтальной полосы прокрутки
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Полосы прокрутки</title>
<style type="text/CSS (ЦСС)">
BODY { overflow-y: hidden; }
</style>
<body>
<p>...</p>
</body>
</html>
Если вы попали в ситуацию, когда полос прокрутки по какой-либо причине на экране нет, а информация, тем не менее, есть, но на экран не помещается, «прокрутить» web-страницу можно с помощью клавиатуры (стрелками вверх и вниз) или мыши. Нажимаем кнопку мыши, когда ее курсор находится в любом месте web-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях.
| Статья опубликована: 03.10.2009 | Последнее обновление: 16.04.2009 |