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

2 ноября 2014 г. Просмотров: 2048 Инструкции
Полосы прокрутки (Scroll bars) - это вертикальная и горизонтальная полоски, размещаемые вдоль правого (при письме слева на право) и нижнего краев окна или отдельной области внутри окна, предназначенные для перемещения содержимого в вертикальном или горизонтальном направлениях. Для управления их внешним видом и поведением в веб-страницах используются элементы языка описания стилей CSS (Cascading Style Sheets - «Каскадные таблицы стилей»), встроенные в язык HTML.
Создать сайт самостоятельно с Wix.com

Инструкция

  • Используйте тег div, если нужно сделать полосу прокрутки не для всей страницы, а только для ограниченной ее области. В языке HTML (HyperText Markup Language - «язык разметки гипертекста») «тегами» называют отдельные команды браузеру отобразить тот или иной элемент страницы. В самом простом виде тег div (его часто называют «слоем») пишется так:Это текст внутри слоя Здесь - открывающий тег, а - закрывающий. Все, что размещено между открывающим и закрывающим тегами, находится в слое как в контейнере и этому контейнеру можно задавать размеры - ширину и высоту. Это делается с помощью дополнительного параметра («атрибута») style, который следует добавить в открывающий тег:
  • Это текст внутри слоя

  • Указывайте в атрибуте style тега div и правила для полос прокрутки слоя тоже:
  • Это текст внутри слоя

    Здесь overflow:auto означает, что полосы прокрутки будут появляться автоматически, то есть когда содержимое слоя не будет умещаться в заданные размеры. Если auto заменить на scroll, то эти полосы будут присутствовать всегда, независимо от того нужны они или нет. А значение hidden окажет противоположное действие - прокрутка никогда не будет появляться, даже если содержимого этого контейнера не будет видно за его краями.

  • Применяйте аналогичный способ и для добавления полос прокрутки к странице в целом. По умолчанию они появляются по мере необходимости, но если по какой-либо причине возникнет необходимость в их постоянном присутствии на странице, то в исходный html-код следует добавить соответствующее правило стиля. Найдите в коде страницы закрывающий тег заголовочной части документа и перед ним впишите эти стилевые инструкции:body {overflow:scroll;}
  • Совет добавлен 19 мая 2011 Совет 2: Как сделать полосу прокрутки В наше время иметь собственный сайт – не роскошь, а скорее необходимость. Его создание требует определенных навыков и знания html. Создать простой сайт довольно просто. Однако его украшение и создание интерактивных элементов, обеспечивающих дополнительную функциональность сайта, вызовет у новичка трудности. Один из таких интерактивных элементов, повышающих удобство посетителей сайта – полоса прокрутки. Она особенно пригодится в полях сайта, обеспечивающих его связь со скриптами (взаимодействие сайта с пользователями).

    Вам понадобится

    • Интернет или любой учебник по html

    Инструкция

  • Самое главное на любом сайте - удобство пользователя. Сама идея применения полосы прокрутки на вашем сайте будет уместна только в том случае, если ее появление продиктовано не вашим желанием, а ее необходимостью. Сделайте макет страницы, на которую вы хотите поместить полосу прокрутки. Выберете место для скролла (так еще называют полосы прокрутки).
  • Выберите место для полосы прокрутки на интересующей вас странице сайта. Она должна быть жестко связана с каким-либо элементом (например, текстовым полем или ниспадающим списком). Это место вы должны рассчитать в пикселях или в процентах. Сделать это нетрудно, особенно если макет сайта имеет ясную структуру.

  • Между тегами BODY вы должны добавить стандартный код для скролла. Найти его можно в любом учебнике по html. Есть два варианта - либо добавить этот фрагмент напрямую в html код страницы, либо приложить в таблице стилей css. Второй способ удобнее, если вы меняете не одну страничку, а весь сайт сразу. Затем нужно ввести цветовые параметры полосы прокрутки, иначе она будет серой и неинтересной. На рисунке показаны и подписаны элементы скролла. Параметры нужно вводить так же, как показано на рисунке, через точку с запятой.
  • Теперь вы обязательно должны протестировать свои доработки. Чтобы полоса прокрутки одинаково смотрелась во всех браузерах, проверьте ее на основных - Internet Explorer, Mozilla Firefox и Opera. Если она не работает на одном из них, вернитесь к первому этапу и исправьте ошибки.
  • Полезный совет Есть простой способ создания полосы прокрутки для web-страницы. Задайте параметр высоты для вашего сайта 75%, тогда скролл появится сам. Правда, его цветовые схемы все равно стоит настроить. Источники
    • Сайт для начинающих web-разработчиков
    Как сделать полосу прокрутки - версия для печати

    Оцените статью!