Тази статия демонстрира използването на свойството CSS overflow-y с множество примери.
Как да използвам свойството Overflow-y в CSS?
CSS “ преливане-y ” се използва за контролиране на преливането на съдържанието по напречната ос в елемент. Той указва дали да се изреже съдържанието или да се добави лента за превъртане, когато съдържанието надвишава височината на контейнера. Възможните стойности за това свойство са „ видими ”, “ скрит ”, “ превъртане ', и ' Автоматичен ”.
Нека посетим примерите по-долу за по-добра демонстрация на свойството overflow-y:
Пример 1: Използване на Visible като стойност за свойството Overflow-y
„ видими ” позволява съдържанието да прелива от контейнера и не добавя изрязване или ленти за превъртане. Посетете практичния кодов блок по-долу:
>
>
>
Описанието на горния кодов блок:
- Първо задайте стойност „ родител ' към ' клас ” и използвайте „ стил ' атрибут.
- Освен това посочете стойността на „ видими „към CSS“ преливане-y ' Имот. И го задайте равно на „ стил ”, за да работи CSS стилът.
- След това създайте вложен „ див ” и му присвоете клас от „ childContent ”. Освен това му предоставете фиктивни данни.
Сега използвайте свойствата на CSS, за да подобрите визуализацията, която помага за по-доброто разбиране на свойството CSS overflow-y:
.родител {ширина : 200 пиксела ;
височина : 150 пиксела ;
граница : 1px твърдо черен ;
}
.childContent {
височина : 300 пиксела ;
Цвят на фона : светло синьо ;
}
Описанието на свойствата на CSS е дадено по-долу:
- Първо, „ родител ” е избран клас и стойностите на „ 200 пиксела ”, “ 150 пиксела ', и ' 1px плътно черно ' са присвоени на CSS ' ширина ”, “ височина ', и ' граница ” имоти, респ.
- След това изберете „ childContent ” и задайте стойностите на „ 300 пиксела ' и ' светло синьо „към CSS“ височина ' и ' Цвят на фона ” имоти, респ. Този клас е разширен до „ родител ' клас, който се контролира от CSS ' препълване ' Имот.
След компилирането на кодови фрагменти, уеб страницата изглежда така:
Моментната снимка показва, че съдържанието на препълване вече е видимо и лентата за превъртане или изрязването не се добавят по подразбиране.
Пример 2: Използване на Hidden като стойност за свойството Overflow-y
„ преливане-y ” свойство със стойност „ скрит ” скрива цялото съдържание, което се премества извън неговия родителски контейнер. Това свойство не добавя ленти за превъртане, вместо това изрязва препълненото съдържание:
>
>
Горният кодов фрагмент съдържа:
- Първо, същият код се вмъква отново с увеличаване на фиктивното съдържание, поставено във вътрешния елемент div.
- След това променете стойността на „ преливане-y „ собственост на „ скрит ' към ' ” таг с клас „ родител ”.
След повторно изобразяване уеб страницата изглежда така:
Моментната снимка показва, че съдържанието на препълване е изрязано.
Пример 3: Използване на Scroll като стойност за свойството Overflow-y
Задаване на стойността на „ преливане-y ” собственост към „ превъртане ” позволява на крайния потребител да превърта през
съдържание, което го прелива. Нека посетим кодовия блок по-долу:
= 'родител' стил = 'преливане-y: превъртане;' >
= 'childContent' > Това е просто манекен съдържание използван за демонстрация на свойството overflow-y, когато е настроено на видимо. Това е просто манекен съдържание използван за демонстрация на свойството overflow-y, когато е настроено на видимо.
>
>В горния кодов блок:
- Първо, същата HTML структура е вмъкната вътре в „ <тяло> ” таг.
- След това променете стойността на „ преливане-y ” собственост към „ превъртане ”. Това позволява на „ родител ” div, за да активирате ефекта на превъртане за контролиране на препълненото съдържание.
След компилирането на горния кодов блок, уеб страницата изглежда така:
Горният gid илюстрира, че ефектът на превъртане е наличен за контролиране на препълненото съдържание.
Пример 4: Използване на Auto като стойност за свойството Overflow-y
В този пример потребителите могат да добавят лента за превъртане само ако съдържанието не се побира в контейнера. Освен това, ако съдържанието не препълва, лентата за превъртане няма да бъде добавена. Възможно е чрез предоставяне на стойността на „ Автоматичен „към CSS“ преливане-y ' Имот:
= 'родител' стил = 'overflow-y: auto;' >
= 'childContent' > Това е просто манекен съдържание използван за демонстрация на свойството overflow-y, когато е настроено на видимо. Това е просто манекен съдържание използван за демонстрация на свойството overflow-y, когато е настроено на видимо.
>
>В горния кодов блок:
- Първо вмъкнете същия HTML файл в „ <тяло> ” таг.
- След това актуализирайте стойността на „ преливане-y „ собственост на „ Автоматичен ”. Той позволява ефекта на превъртане спрямо вертикалната дължина на съдържанието.
След края на процеса на компилиране уеб страницата работи по следния начин:
Горният gif показва свойството за препълване, което е активирало лентата за превъртане според дължината на съдържанието.
Заключение
CSS “ преливане-y ” се използва за контролиране на препълненото съдържание по напречната ос в елемент. Свойството overflow-y контролира съдържанието според специфичната стойност, предоставена на свойствата overflow-y. „ визуален ” показва препълненото съдържание, „ скрит ” скрива препълващото се съдържание, а „ превъртане ” добавя лента за превъртане за контрол на съдържанието. И ако стойността е „ Автоматичен ” лентата за превъртане добавя или премахва според дължината на съдържанието.