| Главная » Статьи » CSS » Рецепты CSS |
Перед тем как убрать полосы прокрутки (скроллбар) с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого веб-страницы создает трудности посетителям сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали! ФреймыДля управления отображением полос прокрутки во фреймах используется параметр 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> Если вы попали в ситуацию, когда полос прокрутки по какой-либо причине на экране нет, а информация, тем не менее, есть, но на экран не помещается, «прокрутить» веб-страницу можно с помощью клавиатуры (стрелками вверх и вниз) или мыши. Нажимаем кнопку мыши, когда ее курсор находится в любом месте веб-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях. | |
| Просмотров: 5876 | |
| Всего комментариев: 0 | |