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

Как добавить скролл на страницу html

  • автор:

Добавить скролл блоку, который не влазит целиком на страницу

В общем, есть блок содержимое которого вполне влазит в него, но сам блок не влазит на страницу, position у него стоит fixed. У общей старницы есть скролл, но нужно добавить отдельный скролл этому блоку т.к. он не уходит вверх при пролистывании главной страницы. Сколько не пытаюсь реализовать — все в пустую, так что даже скинуть код с какими-то наработками не могу. Буду благодарен за любую помощь.

Отслеживать

задан 23 сен 2016 в 16:02

11 2 2 бронзовых знака

То есть по сути, если блок не влазит на страницу, мне нужно динамически обрезать его высоту, пока он не влезет, а скролл уже тогда сам появится

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

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

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

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

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

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

auto-scroll

Результат:

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

overflow

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

    overflow   
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

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

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

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

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit ;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

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

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