css overflow scroll y

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .

visible

Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

hidden

Переполняющее содержимое не отображается.

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

scroll

Полоса прокрутки отображается всегда.

То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:

visible По умолчанию, содержимое вылезает за границы блока. hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Example

Show different overflow-y property values:

div.ex2 <
overflow-y: hidden;
>

div.ex3 <
overflow-y: auto;
>

div.ex4 <
overflow-y: visible;
>

Definition and Usage

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.overflowY=»scroll» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -ms-, specify the first version that worked with a prefix.

See the following post for a picture highlighting my question and a potential solution:

However, this strategy breaks when you actually move the scrollbar. In the suggested implementation ( position: fixed; ), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.

See here for a demo of the bug: http://jsfiddle.net/narcV/4/

Any ideas how I can make the tooltips display next to the child div at all times?

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