Как добавить полосу прокрутки по вертикали в html
Перейти к содержимому

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

  • автор:

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

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

  • auto : если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
  • hidden : отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
  • scroll : в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
  • visible : значение по умолчанию, контент отображается, даже если он выходит за границы блока

Рассмотрим применение двух значений:

    Прокрутка в CSS3 .article1 < width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: auto; >.article2  

Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.

Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.

Создание прокрутки в CSS

Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow :

overflow-x: auto; overflow-y: hidden;

Как сделать скролл в html

Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow .

Overflow может принимать следующие значения:

  • visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
  • hidden: Контент обрезается, без предоставления прокрутки.
  • scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
  • auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Исходный HTML документ:

 Пример текста, который будет в блоке с полосами прокрути - как горизонтальной так и вертикальной. Для того что бы ими можно было воспользоваться, добавим д____л____и____н____н____о_____е слово. 
div  border: 1px solid #000; width: 200px; height: 50px; /* Включаем отображение полос прокрутки по горизонтали и по вертикали */ overflow: auto; padding: 20px; > 

auto-scroll

Результат:

Как создать вертикальную полосу прокрутки в фрейме с текстом и вертикальную с горизонтальной в другом фрейме на том же экране

Преподаватель дал задание на создание фреймов и полос прокрутки, но абсолютно ничего не объяснил. Я перерыла уже все сайты, которые более-менее подходили мне по теме и ничего не нашла. Помогите. Вот пример, который я сделала, все выводит, как надо, но полосы прокрутки ни в каких вариантах не появляются. Ни через scrolling, ни через style и т.д. Нужно, чтобы в первом фрейме была полоса прокрутки справа и в четвертом фрейме — справа и снизу. Что мне нужно делать?

Фреймы
Отслеживать
задан 5 апр 2021 в 14:54

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Как вариант: В Fr1.htm добавить

в Fr4.htm добавить

(можно через тег но суть та же)

Отслеживать
ответ дан 5 апр 2021 в 17:35

  • html
  • iframe
  • simple-html-dom
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.30.4069

overflow-x

Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible Отображается все содержание элемента, даже за пределами установленной ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляется горизонтальная полоса прокрутки. auto В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.

HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx

    overflow-x   
Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Применение свойства overflow-x

Рис. 1. Применение свойства overflow-x

Объектная модель

[window.]document.getElementById(» elementID «).style.overflowX

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *