Как убрать полосы прокрутки
Перед тем как убрать полосы прокрутки (скроллбар) с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого веб-страницы создает трудности посетителям сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали!
Фреймы
Для управления отображением полос прокрутки во фреймах используется параметр scrolling. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (пример 1).
Пример 1. Запрет полосы прокрутки во фреймах
<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. Создание нового окна без полос прокрутки
<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. Запрет полосы прокрутки на веб-странице
<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. Запрет горизонтальной полосы прокрутки
<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>
Если вы попали в ситуацию, когда полос прокрутки по какой-либо причине на экране нет, а информация, тем не менее, есть, но на экран не помещается, «прокрутить» веб-страницу можно с помощью клавиатуры (стрелками вверх и вниз) или мыши. Нажимаем кнопку мыши, когда ее курсор находится в любом месте веб-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях.
| Статья опубликована: 03.10.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Alex
11.11.2006
А как в сайт из Html & CSS всавить этот скрипт отдельным файлом , для его возможной замены? Если не сложно, напишите как вставить
скрипт adsense отдельным файлом , не в html?
Влад Мержевич
13.11.2006
Вместо file.js пишешь тот файл с программой, который тебе требуется.
Арина
20.11.2006
Заранее спасибо
Apple
03.01.2007
А может легче использовать параметр href для тега <REL> ?
wakh.viart.ru
04.05.2007
в ИЕ не работает
Влад Мержевич
08.05.2007
Леона
10.05.2007
как изменить вид скроллбара у элементов веб-страницы?
Влад Мержевич
10.05.2007
body {
scrollbar-face-color: red;
scrollbar-track-color: blue;
scrollbar-darkshadow-color: orange;
scrollbar-shadow-color: green;
scrollbar-highlight-color: lime;
scrollbar-base-color: maroon;
scrollbar-3dlight-color: navy;
scrollbar-arrow-color: white;
}
</style>
Pion2er
25.06.2007
<body scroll="no">
в Опере не хочет
Влад Мержевич
26.06.2007
BETEP
26.06.2007
http://www.webmascon.com/topics/coding/25a.asp
если верить этой статье, то в ваших примерах DOCTYPE указан неверно, может из за этого возникают некоторые проблемы?
Влад Мержевич
27.06.2007
Ярослав
06.07.2007
Михаил
16.07.2007
Есть еще другие стили о которых там не упоминается?
Влад Мержевич
24.07.2007
См. пример 4.
Сергей
31.07.2007
Дима
14.08.2007
Pion2er давал такой ход <body scroll="no"> ,он работает в ИЕ
но убирает все полосы, а мне нужно нижнию.
Влад Мержевич
15.08.2007
Дима
15.08.2007
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
Полоса пропадает и скрипт меню не работает.
Может есть вариант исправить этот баг?
CyberDragon
08.10.2007
gg
04.01.2008
может лучше
<script type="text/javascrip" src="file.js">
Влад Мержевис
06.01.2008
Sonic
16.01.2008
Влад Мержевич
17.01.2008
Максим
22.01.2008
scrollbar-face-color: #555555;
scrollbar-highlight-color: #cccccc;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #cccccc;
scrollbar-track-color: #555555;
scrollbar-darkshadow-color: #333333;
это вс? работает но к сожелени при внесвение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
раскраска полосы прокрутки пропадает
http://webmascon.com/topics/coding/25a.asp
я проч?л что элемент DOCTYPE очень важен
нелезя ли как то раскрасить полосу прокрутки с использованием тега
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Николай
13.02.2008
Алиса
13.03.2008
Николай
18.03.2008
html { overflow-x: hidden }
правда работает только в IE и FF. Опера не воспринимает.
Денис
21.04.2008
<html style="height: 100%; margin-bottom: 1px;">
Светлана
03.05.2008
Ф?дор Миннигараев
08.06.2008
Гореверстальщик
23.06.2008
skyadmin
18.07.2008
<IFRAME frameborder=0 scrolling=no src='Main.html' width=800px height=70%>IFRAME не поддерживается!</IFRAME><br>
Bad Request
22.07.2008
1. В параметрах нового окна вместо scrollbar=0 нужно scrollbars=0
Этот пример работает корректно, потому что по умолчанию значение scrollbars и так 0.